CSS之transform、transition和animation介绍

本文介绍了CSS3中的三个关键动画属性：transform用于元素变换，transition实现平滑过渡效果，animation则支持复杂动画。通过实例演示了如何使用这些属性来增强网页元素的交互性和视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS之transform、transition和animation介绍

transform、transition 和 animation 都是 CSS3 中用于实现页面元素动画效果的属性（properties）。简单地说，tansition（过渡）是一个过渡属性，就是一个属性从一个值平滑过渡到另一个值。tansform（变换），就是一个整体的位置（或整体大小）发生变换——如旋转、缩放、倾斜或移动。animation（动画），就是在一段时间内各种属性进行变化从而达到一个动画的效果。

【transition属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

简写属性（Shorthand properties）是CSS中一种将多个单独属性组合成一个属性的便捷方式——也就是可以让你同时设置好几个 CSS 属性值的 CSS 属性。通过简写属性，开发者可以在一个属性值中设置多个属性，从而简化代码书写。】