使用简写属性,将动画与 div 元素绑定:
定义和用法
animation 属性是一个简写属性,用于设置六个动画属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
语法
animation: name duration timing-function delay iteration-count direction;
什么是 CSS 动画?
动画使元素逐渐从一种样式变为另一种样式。
您可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画,您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
@keyframes 规则
如果您在 @keyframes
规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效,必须将动画绑定到某个元素。
下面的例子将 "example" 动画绑定到 <div> 元素。动画将持续 4 秒钟,同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow":
注意:animation-duration
属性定义需要多长时间才能完成动画。如果未指定 animation-duration
属性,则动画不会发生,因为默认值是 0s(0秒)。
在上面的例子中,通过使用关键字 "from" 和 "to"(代表 0%(开始)和 100%(完成)),我们设置了样式何时改变。
您也可以使用百分比值。通过使用百分比,您可以根据需要添加任意多个样式更改。
下面的例子将在动画完成 25%,完成 50% 以及动画完成 100% 时更改 <div> 元素的背景颜色:
下面的例子将在动画完成 25%,完成 50% 以及动画完成 100% 时更改背景颜色和 <div> 元素的位置:
延迟动画
animation-delay
属性规定动画开始的延迟时间。
下面的例子在开始动画前有 2 秒的延迟: