CSS3 动画效果详解：transform、transition 和 animation

深入CSS3动画效果的总结详解 本篇文章对CSS3中的动画效果进行了详细的分析介绍，涵盖了transform、transition和animation三类动画效果的属性和用法。 1. transform属性 transform属性用于设置元素的变形效果，包括旋转、缩放、位移和倾斜等。其主要用法有： * rotate：设置元素顺时针旋转的角度，参数x必须是以deg结尾的角度数或0，负数表示反向。 * scale：设置元素放大或缩小的倍数，包括scale(a)、scale(a,b)、scaleX(a)和scaleY(b)四种用法。 * translate：设置元素的位移，包括translate(a,b)、translateX(a)和translateY(b)三种用法。 * skew：设置元素倾斜的角度，包括skew(a,b)、skewX(a)和skewY(b)三种用法。 * matrix：设置元素的变形矩阵，因矩阵变形过于复杂，暂略。 * origin：设置元素的悬挂点，包括transform-origin:ab;的用法，悬挂点即为元素旋转和倾斜时的中心点。 2. transition属性 transition属性用于设置元素的过渡效果，包括transition-property、transition-duration和transition-timing-function三类属性。 * transition-property：指定transition效果作用的CSS属性，其值是CSS属性名。 * transition-duration：动画效果持续的时间，其值为以s结尾的秒数。 * transition-timing-function：设置动画效果的时间函数，包括linear、ease、ease-in、ease-out和ease-in-out五种用法。 3. animation属性 animation属性用于设置元素的动画效果，包括animation-name、animation-duration、animation-timing-function、animation-delay和animation-iteration-count五类属性。 * animation-name：指定动画效果的名称，其值是CSS关键帧动画的名称。 * animation-duration：动画效果持续的时间，其值为以s结尾的秒数。 * animation-timing-function：设置动画效果的时间函数，包括linear、ease、ease-in、ease-out和ease-in-out五种用法。 * animation-delay：设置动画效果的延迟时间，其值为以s结尾的秒数。 * animation-iteration-count：设置动画效果的循环次数，其值可以是数字或infinite。 本篇文章对CSS3中的动画效果进行了详细的分析介绍，对于需要的朋友来说是一份非常有价值的参考资料。