CSS实现动画主要有三种方式：transition，transform，和animation1。以下是一些详细的逻辑，实例和注意事项：
Transition：transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。例如，在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化2。它的子属性有：
Transform：transform属性允许你旋转，缩放，倾斜或平移给定元素。这是由修改CSS视觉格式化模型的坐标空间来实现的2。
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。
注意事项：