CSS中的过渡（transition）和动画（animation）是用来为网页添加一些生动和交互的效果，使用户在浏览页面时更加愉快和有趣。本文将详细介绍CSS中的过渡和动画效果的使用方法和常见属性，帮助读者更好地理解和运用它们。
过渡（transition）
过渡是指在CSS属性值发生改变时，元素会从旧的属性值平滑地转换到新的属性值的效果。通过过渡，我们可以实现例如渐变的颜色过渡、平滑的形状变化等效果。
过渡的基本语法
/* 单一属性过渡 */
transition: property duration timing-function delay;
/* 多属性过渡 */
transition: property1 duration1 timing-function1 delay1,
property2 duration2 timing-function2 delay2,
...
- property：指定要过渡的CSS属性名称，如
color、background-color等。 - duration：指定过渡的持续时间，单位为秒（s）或毫秒（ms）。
- timing-function：指定过渡的时间函数，控制过渡效果的速度曲线，常见的有
linear、ease、ease-in、ease-out、ease-in-out等。 - delay：指定过渡的延迟时间，单位为秒（s）或毫秒（ms）。
过渡的常见属性
常用的过渡属性如下：
transition-property：指定要过渡的CSS属性名称，可以使用all表示所有属性。transition-duration：指定过渡的持续时间。transition-timing-function：指定过渡的时间函数。transition-delay：指定过渡的延迟时间。
过渡的示例
以下是一个简单的过渡示例：
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease-in-out;
}
div:hover {
width: 200px;
}
在上述示例中，当鼠标悬停在div元素上时，宽度属性值会从原来的100px平滑过渡到200px，过渡时间为1秒，过渡速度为先加速再减速。
动画（animation）
动画是指通过连续改变CSS的属性值来实现元素的运动或变化效果。相比于过渡，动画提供更加自由和复杂的效果，如元素的旋转、缩放和淡入淡出等。
动画的基本语法
/* 单一动画 */
animation: name duration timing-function delay iteration-count direction fill-mode;
/* 多个动画 */
animation: name1 duration1 timing-function1 delay1 iteration-count1 direction1 fill-mode1,
name2 duration2 timing-function2 delay2 iteration-count2 direction2 fill-mode2,
...;
- name：指定动画的名称，可以通过
@keyframes规则定义一个动画序列。 - duration：指定动画的持续时间。
- timing-function：指定动画的时间函数。
- delay：指定动画的延迟时间。
- iteration-count：指定动画的重复次数，可以使用
infinite表示无限次重复。 - direction：指定动画播放的方向，如
normal、reverse、alternate等。 - fill-mode：指定动画结束后的样式状态，如
forwards、backwards、both等。
动画的常见属性
常用的动画属性如下：
animation-name：指定动画的名称。animation-duration：指定动画的持续时间。animation-timing-function：指定动画的时间函数。animation-delay：指定动画的延迟时间。animation-iteration-count：指定动画的重复次数。animation-direction：指定动画播放的方向。animation-fill-mode：指定动画结束后的样式状态。animation-play-state：指定动画的播放状态。
动画的示例
以下是一个简单的动画示例：
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 1s linear infinite;
}
在上述示例中，div元素将无限次地以线性的方式旋转，每次旋转从0度到360度，持续时间为1秒。
总结
通过使用CSS中的过渡和动画效果，我们可以为网页添加更丰富和生动的交互效果。过渡和动画分别适用于不同的场景，过渡适用于元素属性值的平滑过渡，而动画则适用于更加自由和复杂的效果的实现。熟练掌握并合理运用这两种特性，将可以大大提升网页的用户体验和吸引力。
本文来自极简博客，作者：独步天下，转载请注明原文链接：CSS中的过渡和动画效果详解
