CSS帧动画的具体实现(附带实例)
帧动画需要在块元素或行内块元素中应用,具体分两个步骤来实现:
下面的代码展示了帧动画的基本实现:
接下来,在 div2 元素的样式中,使用 animation-name 属性设置关键帧组的名称,并使用 animation-duration 属性指定动画执行的时间,这里指定 2s 完成整个动画过程。
下面再了解一些帧动画相关的属性:
此外,动画也有一个组合属性 animation,但由于动画的设置比较复杂,建议大家使用具体的属性进行动画效果的设置工作。
下面的代码简单地演示了 animation 属性的应用。
- 第一步,使用 @keyframes 指令定义动画关键帧(keyframe);
- 第二步,在元素中使用 animation-name 属性指定应用的关键帧名称。
下面的代码展示了帧动画的基本实现:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { width: 100px; height: 100px; background-color: gray; margin: 30px; } /* 定义关键帧 */ @keyframes block_rotate { 0% { transform: rotate(60deg); } 20% { transform: rotate(120deg); } 40% { transform: rotate(180deg); } 60% { transform: rotate(240deg); } 80% { transform: rotate(300deg); } 100% { transform: rotate(360deg); } } /* 动画应用 */ #div2 { animation-name: block_rotate; animation-duration: 2s; } </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> </body> </html>上述代码中使用 @keyframes 指令定义了一个名为 block_rotate 的关键帧组,其中的 0% 到 100% 指定在动画各个阶段应用的样式,这里设置的动画就是每个阶段旋转 60°,最终恢复到初始状态。
接下来,在 div2 元素的样式中,使用 animation-name 属性设置关键帧组的名称,并使用 animation-duration 属性指定动画执行的时间,这里指定 2s 完成整个动画过程。
下面再了解一些帧动画相关的属性:
属性名称 | 说明 |
---|---|
animation-delay | 设置动画延时时间,如 1s 表示 1 秒。 |
animation-iteration-count | 设置动画执行次数,infinite 值表示无限循环。 |
animation-timing-function |
设置计时函数,也就是动画执行的节奏,常用的属性值有:
|
animation-fill-mode |
指定动画执行前或执行后元素样式的应用模式,其值包括:
|
animation-play-state |
指定动画执行的状态,属性值包括:
|
animation-direction |
设置动画播放的方向,包括:
|
此外,动画也有一个组合属性 animation,但由于动画的设置比较复杂,建议大家使用具体的属性进行动画效果的设置工作。
下面的代码简单地演示了 animation 属性的应用。
/* 动画应用 */ #div2 { animation:block_rotate 2s linear infinite alternate; }本例中,div2 元素会先顺时针旋转,然后逆时针旋转,并无限循环。