本文将具体的属性解释注解若何切确的进修css动画格式的筹划 ，css给我们新添加了良多的属性格式 ，动画的属性可以使我们的网页更新有活力 ，所以本文将具体的属性引见animation属性和他的独霸身手。
(1) 甚么是属性动画
动画是 CSS3中最具倾覆性的特点之一 ，可经由过程设置多个节点来切确的属性独霸一个或一组动画 ，从而完成宏壮的属性动画终局
(2) 动画的根本独霸
先定义动画
在调用定义好的动画
(3) 语法格式(定义动画)
(4)代码演示
@keyframes move { 0% { width: 100px; } 100% { width: 200px } } div { /* 调用动画 起的类名*/ animation-name: move; /* 延续时分 */ animation-duration: 1s； } |
属性 | 描摹 |
@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.代码演示
div { 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; } div:hover { /* 端方动画可否停歇或播放 */ animation-play-state: paused; } |
文章推荐：