css动画实现的方式

有两种方式一种是transition,一种是animation

transition：

可以实现过渡动画,通过设置过渡属性，运动时间，延迟时间，运动速度来实现。只有开始和结束两种状态。

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 2s, height 2s, background-color 2s;
}
​
.element:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

animation：

可以实现帧动画，可以实现多种状态，可以做循环次数甚至是无限运动，它是配合@keyframes来实现的

@keyframes myAnimation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
​
.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: myAnimation 5s infinite;
}

Transforms

CSS Transforms 允许你对元素进行2D或3D变换，如旋转、缩放、倾斜等。这些变换可以用来创建动画效果。

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 2s;
}
​
.element:hover {
  transform: rotate(360deg);
}
​

animation的属性

1、animation-name**:

指定要使用的动画名称。这个名称必须与 @keyframes 规则中定义的名称相匹配。

animation-name: myAnimation;

2、animation-duration:

指定动画完成一个周期所需的时间，单位为秒（s）或毫秒（ms）

animation-duration: 2s;

3、animation-timing-function:

指定动画的速度曲线，即动画的播放速度如何随时间变化。可以使用预定义的值（如 ease, linear, ease-in, ease-out, ease-in-out）或者自定义的贝塞尔曲线。

animation-timing-function: ease-in-out;

4.animation-delay:

指定动画开始前的延迟时间，单位为秒（s）或毫秒（ms）。

animation-delay: 1s;

5.animation-iteration-count:

指定动画重复播放的次数。可以是具体的数字，也可以是 infinite 表示无限次播放。

animation-iteration-count: 3;

6.animation-direction:

指定动画的播放方向。可以是 normal（正常方向），reverse（反向播放），alternate（正向和反向交替播放），或者 alternate-reverse（反向和正向交替播放）。

animation-direction: alternate;

7.animation-fill-mode:

指定动画在开始之前和结束之后如何应用样式。可以是 none（不应用任何样式），forwards（应用动画结束时的样式），backwards（应用动画开始时的样式），或者 both（应用动画开始和结束时的样式）。

animation-fill-mode: forwards;

8.animation-play-state:

指定动画的播放状态。可以是 running（正在播放）或 paused（暂停）

animation-play-state: paused;

9.animation:

animation 是一个简写属性，可以同时设置上述所有属性。

animation: myAnimation 2s ease-in 1s 3 alternate forwards;

.element 元素将执行名为 myAnimation 的动画，动画持续时间为2秒，使用 ease-in 速度曲线，延迟1秒开始，重复3次，交替播放，动画结束后保留最后一帧的样式，并且动画是暂停的。

.element {
  animation: myAnimation 2s ease-in 1s 3 alternate forwards;
}
​
@keyframes myAnimation {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

transition

是一个CSS属性，它允许你在元素的某个属性发生变化时，平滑地过渡到新的值。

1.transition-property:

指定应用过渡效果的CSS属性名称。可以是单个属性，也可以是多个属性，用逗号分隔。

transition-property: width, height, background-color;

2.transition-duration:

指定过渡效果的持续时间，单位为秒（s）或毫秒（ms）。

transition-duration: 2s;

3.transition-timing-function:

指定过渡效果的速度曲线，即动画的播放速度如何随时间变化。可以使用预定义的值（如 ease, linear, ease-in, ease-out, ease-in-out）或者自定义的贝塞尔曲线。

transition-timing-function: ease-in-out;

4.transition-delay:

指定过渡效果开始前的延迟时间，单位为秒（s）或毫秒（ms）。

transition-delay: 1s;

5.transition:

transition 是一个简写属性，可以同时设置上述所有属性。

transition: width 2s ease-in 1s, height 2s ease-out 1s;

.element 元素在鼠标悬停时，宽度、高度和背景颜色将平滑地过渡到新的值，过渡效果持续时间为2秒，使用默认的速度曲线，并且没有延迟。

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 2s, height 2s, background-color 2s;
}
​
.element:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}