CSS实现动画

CSS实现动画主要有三种方式：transition，transform，和animation1。以下是一些详细的逻辑，实例和注意事项：

1. Transition：transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。例如，在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化2。它的子属性有：

   • transition-property：用于指定哪个或哪些 CSS 属性用于过渡3。
   • transition-duration：设置属性以秒或毫秒为单位，指定过渡动画所需的时间3。
   • transition-delay：用于规定在过渡效果开始作用之前需要等待的时间，即延迟多久执行动画3。
   • transition-timing-function：用于规定在过渡效果执行时采取的时序函数3。

2. Transform：transform属性允许你旋转，缩放，倾斜或平移给定元素。这是由修改CSS视觉格式化模型的坐标空间来实现的2。

3. Animation：animation是CSS3的一个重要特性，可以实现复杂的动画效果，而无需使用JavaScript或Flash2。它的子属性有：

   • animation-name：指定由 @keyframes 描述的关键帧名称2。
   • animation-duration：设置动画一个周期的时长2。
   • animation-timing-function：设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化2。
   • animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间2。
   • animation-iteration-count：设置动画重复次数，可以指定 infinite 无限次重复动画2。
   • animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行2。
   • animation-fill-mode：指定动画执行前后如何为目标元素应用样式2。
   • animation-play-state：允许暂停和恢复动画2。

4. 注意事项：

   • 动画名称必须有，且名称随意4。
   • 在使用复合式写法的时候,由于过渡时间和延迟时间单位都是s/ms 这里就会出现前后顺序的问题，有些同学可能就会出现错误，在这里两者的顺序是不能反的4。
   • CSS动画运行效果良好，甚至在低性能的系统上2。
   • 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率2。

2