在哪里可以找到css动画样式大全

你可以在以下网站上找到各种 CSS 动画样式：

1. Animista: https://animista.net/
2. CSS Animation: https://cssanimation.rocks/
3. Animate.css: https://animate.style/
4. Hover.css: https://ianlunn.github.io/Hover/
5. Magic Animations: https://www.minimamente.com/project/magic/
6. CSShake: https://elrumordelaluz.github.io/csshake/
7. SpinKit: https://tobiasahlin.com/spinkit/
8. Loaders.css: https://connoratherton.com/loaders

这些网站提供了大量的 CSS 动画效果和样式，你可以根据自己的需要选择适合自己的样式。

相关问题

如何在动画执行的时候加在css样式

如果您想在动画执行的时候添加CSS样式，可以使用CSS关键帧动画（@keyframes）。您可以在关键帧动画中定义元素在动画过程中不同时间点应用的CSS样式。例如，您可以在动画的某个关键帧上应用旋转样式。

下面是一个示例，展示如何在元素加载动画期间应用CSS旋转样式：

HTML:

<div class="loader"></div>

CSS:

.loader {
  /* 定义元素样式 */
  width: 50px;
  height: 50px;
  background-color: #ccc;
  /* 定义关键帧动画 */
  animation: loader 2s ease-in-out infinite;
}

@keyframes loader {
  /* 定义动画关键帧 */
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

在上面的示例中，我们定义了一个名为“loader”的元素，并为其定义了一个关键帧动画“loader”。该动画将在2秒钟内无限次循环执行，并在动画的50%关键帧上应用了旋转样式，使元素在动画执行的中间时期旋转180度。

您可以根据需要更改关键帧动画中的CSS样式，以实现您想要的效果。

HTML写出所有的css动画样式

下面是一些常见的 CSS 动画样式：

1. transition：用于在状态变化时添加过渡动画。
2. animation：用于创建关键帧动画。
3. transform：用于对元素进行旋转、缩放、倾斜、平移等变换。
4. @keyframes：用于定义关键帧动画的具体内容。
5. transition-delay：用于设置过渡动画的延迟时间。
6. transition-duration：用于设置过渡动画的持续时间。
7. transition-property：用于设置过渡动画的属性类型。
8. transition-timing-function：用于设置过渡动画的时间函数类型。
9. animation-delay：用于设置关键帧动画的延迟时间。
10. animation-direction：用于设置关键帧动画的播放方向。
11. animation-duration：用于设置关键帧动画的持续时间。
12. animation-fill-mode：用于设置关键帧动画在播放前和播放后的状态。
13. animation-iteration-count：用于设置关键帧动画的重复次数。
14. animation-name：用于设置关键帧动画的名称。
15. animation-play-state：用于设置关键帧动画的播放状态。
16. animation-timing-function：用于设置关键帧动画的时间函数类型。
17. perspective：用于设置 3D 变换的基准点。
18. perspective-origin：用于设置 3D 变换的基准点位置。
19. backface-visibility：用于设置当元素不面向屏幕时是否可见。

以上只是一些最常用的 CSS 动画样式，还有很多其他的动画样式可以使用。