css动画animation属性
本文将详细的讲解如何正确的学习css动画样式的布局，css给我们新增加了很多的样式，动画的能够使我们的网页更新有活力，所以本文将详细的介绍animation属性以及他的使用技巧。
1.动画调用
(1) 什么是动画
动画是 CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
(2) 动画的基本使用
先定义动画
在调用定义好的动画
(3) 语法格式(定义动画)
(4)代码演示
@keyframesmove{ 0%{ width:100px; } 100%{ width:200px } } p{ /*调用动画 起的类名*/ animation-name:move; /*持续时间*/ animation-duration:1s； } |
2.动画属性
属性 | 描述 |
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
animation-name | 规定@keyframes动画的名称。(必须的) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的) |
animation-timing-function | 规定动画的速度曲线，默认是“ease”。 |
animation-delay | 规定动画何时开始，默认是0。1s |
animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite（无限循环） |
animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal ",alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"paused"。 |
animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
3.代码演示
p{ width:100px; height:100px; background-color:aquamarine; /*动画名称*/ animation-name:move; /*动画花费时长*/ animation-duration:2s; /*动画速度曲线*/ animation-timing-function:ease-in-out; /*动画等待多长时间执行*/ animation-delay:2s; /*规定动画播放次数infinite:无限循环*/ animation-iteration-count:infinite; /*是否逆行播放*/ animation-direction:alternate; /*动画结束之后的状态*/ animation-fill-mode:forwards; } p:hover{ /*规定动画是否暂停或者播放*/ animation-play-state:paused; } |
