CSS 动画
创建动画序列,需要使用 animation
属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes
规则实现。
CSS animation
- CSS
animation
属性是animation-name
,animation-duration
,animation-timing-function
,animation-delay
,animation-iteration-count
,animation-direction
,animation-fill-mode
和animation-play-state
属性的一个简写属性形式。 animation
属性用来指定一组或多组动画,每组之间用逗号相隔。- 初始值:
- animation-name: none
- animation-duration: 0s
- animation-timing-function: ease
- animation-delay: 0s
- animation-iteration-count: 1
- animation-direction: normal
- animation-fill-mode: none
- animation-play-state: running
- animation-timeline (en-US): auto
animation 的子属性:
- animation-name
指定由@keyframes
描述的关键帧名称。 - animation-duration
设置动画一个周期的时长。 - animation-timing-function
设置动画速度, 即通过建立加速度曲线,设置动画在关键帧之间是如何变化。 - animation-delay
设置延时,即从元素加载完成之后到动画序列开始执行的这段时间。 - animation-iteration-count
设置动画重复次数, 可以指定infinite
无限次重复动画 - animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。 - animation-fill-mode
指定动画执行前后如何为目标元素应用样式。 - animation-play-state
允许暂停和恢复动画。
使用 keyframes 定义动画序列
一旦完成动画的时间设置, 接下来就需要定义动画的表现。通过使用 @keyframes
建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
因为动画的时间设置是通过 CSS 样式定义的,关键帧使用 percentage
来指定动画发生的时间点。0%
表示动画的第一时刻,100%
表示动画的最终时刻。因为这两个时间点十分重要,所以还有特殊的别名:from
和 to
。这两个都是可选的,若 from/0%
或 to/100%
未指定,则浏览器使用计算值开始或结束动画。
也可包含额外可选的关键帧,描述动画开始和结束之间的状态。
示例
- 动画:上下浮动。
- 代码:
<div class="box slide"/>
.box {
width: 300rpx;
height: 160rpx;
background-color: rgb(65, 114, 98);
}
.slide {
animation: slide 1.5s linear infinite both;
-webkit-animation: slide 1.5s linear infinite both;
}
@-webkit-keyframes slide {
25% {
transform: translateY(-4px);
transform: translateY(-4px);
}
50%,
100% {
transform: translateY(0);
transform: translateY(0);
}
75% {
transform: translateY(4px);
transform: translateY(4px);
}
}
@keyframes slide {
25% {
transform: translateY(-4px);
transform: translateY(-4px);
}
50%,
100% {
transform: translateY(0);
transform: translateY(0);
}
75% {
transform: translateY(4px);
transform: translateY(4px);
}
}