CSS3 动画
通过CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3 @keyframes 规则
要创建 CSS3 动画,需要学习 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定某个 CSS 样式就能从目前的样式更改为新样式的动画效果。
CSS3 动画属性(Animation)
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。 | 3 |
| animation-timing-function | 规定动画的速度曲线。 | 3 |
| animation-delay | 规定动画何时开始。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
CSS 背景属性(Background)
| 属性 | 描述 | CSS |
|---|---|---|
| background | 在一个声明中设置所有的背景属性。 | 1 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-color | 设置元素的背景颜色。 | 1 |
| background-image | 设置CSS元素的背景图像。 | 1 |
| background-position | 设置背景图像的开始位置。 | 1 |
| background-repeat | 设置是否及如何重复背景图像。 | 1 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |

浙公网安备 33010602011771号