css 动画基础知识和案例

资深前端之路2024-04-25 10:43

想要更好的掌握知识，可以常识将知识教授出来。这就是写这篇文章的目的。

animation基础知识

animation:创建动画的意思；其中的属性有：animation:属性，执行时间显示方式执行次数。

animation: 执行动画名称执行时间（50s 代表50s执行一个循环）执行速度（linear 代表匀速）重复次数（infinite 代表无限次）;如

css 复制代码

.mover_slow {
  animation: orderMover 50s linear infinite;
}

/**动画名称**/
@keyframes orderMover {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX( calc(-100% - 1710px ) );
  }
}

animation-state: plaused (暂停) /running (执行中)

遇到的问题

1、在动画结束时，如何保持最终的动画状态？如何保持开始的状态？

2、如何让动画暂停？

animation-state:plaused；

3、from to 和百分比写法有什么不同？

from to:只有开始和结尾的状态；而百分比写法可以用多种状态，如20%、30%等，滚动到不同的程度，执行不同的动画效果。可以按照自己的需求分为多段动画。

4、如何是动画循环播放或者指定循环动画？

重复次数改为infinite，就可以无限循环了。

总结

说和做真的不是一回事。在想的时候，想的很清楚，但做的时候，做的细节上的填写以及原来的实现，都开始模糊了。