一、区分容易混淆的几个属性和值 　　先区分一下css中的几个属性： animation （ 动画 ）、 transition （ 过渡 ）、transform（变形）、translate（移动）。 CSS3 中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matr...

CSS3 的变形(transform)、 过渡 ( transition )、 动画 ( animation )是 CSS3 中非常重要的特性，可以为网页设计带来更加丰富的交互 效果 和视觉体验。 1. 变形(transform) 变形是指通过 CSS3 中的transform属性对元素进行平移、旋转、缩放、倾斜等操作，从而改变元素的形状和位置。具体的变形方式包括： 平移（translate）：移动元素的位置。 旋转（rotate）：以元素中心点为轴心进行旋转。 缩放（scale）：缩放元素的大小。 倾斜（skew）：倾斜元素。 矩阵变形（matrix）：通过矩阵变换实现复杂的变形 效果 。 示例代码： div { transform: translate(50px, 50px); 2. 过渡 ( transition ) 过渡 是指在元素属性改变时，通过 CSS3 中的 transition 属性设置 过渡 时间和 过渡 效果 ，从而实现平滑的转换 效果 。具体的 过渡 方式包括： 过渡 时间（ transition -duration）：设置 过渡 动画 的时间，单位可以是秒(s)或毫秒(ms)。 过渡 效果 （ transition -timing-function）：设置 过渡 效果 ，常用的有linear、ease-in、ease-out、ease-in-out等。 过渡 属性（ transition -property）：设置需要 过渡 的属性，可以是单个属性或多个属性。 过渡 延迟（ transition -delay）：设置 过渡 动画 的延迟时间。 示例代码： div { transition : all 1s ease-in-out; 3. 动画 ( animation ) 动画 是指通过 CSS3 中的 animation 属性对元素进行 动画 效果 的设置。具体的 动画 方式包括： 关键帧 动画 （@keyframes）：定义一组 动画 序列，可以设置元素在不同时间点上的样式。 动画 时间（ animation -duration）：设置 动画 持续时间，单位可以是秒(s)或毫秒(ms)。 动画 速度（ animation -timing-function）：设置 动画 速度，常用的有linear、ease-in、ease-out、ease-in-out等。 动画 延迟（ animation -delay）：设置 动画 延迟时间。 动画 方向（ animation -direction）：设置 动画 播放方向，可以是正方向（normal）、反方向（reverse）、交替播放（alternate）等。 动画 次数（ animation -iteration-count）：设置 动画 播放次数，可以是无限次（infinite）。 示例代码： div { animation : my animation 2s ease-in-out infinite; @keyframes my animation { transform: scale(1); 50% { transform: scale(1.5); 100% { transform: scale(1); 以上就是 CSS3 中变形、 过渡 、 动画 的基本介绍和示例代码，希望对你有所帮助。