本文将具体的属性解释注解若何切确的进修css动画格式的筹划 ，css给我们新添加了良多的属性格式，动画的属性可以使我们的网页更新有活力，所以本文将具体的属性引见animation属性和他的独霸身手 。
1.动画调用
(1) 甚么是属性动画
动画是 CSS3中最具倾覆性的特点之一 ，可经由过程设置多个节点来切确的属性独霸一个或一组动画，从而完成宏壮的属性动画终局
(2) 动画的根本独霸
先定义动画
在调用定义好的动画
(3) 语法格式(定义动画)
(4)代码演示
@keyframes move { 0% { width: 100px; } 100% { width: 200px } } div { /* 调用动画 起的类名*/ 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.代码演示
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; } |
版权声明：新流派 - 专业行业资讯与产品服务平台 - x6p.cn ，转载请注明出处：https://www.x6p.cn/news/%E5%B0%8F%E9%B8%A1%E5%AE%9D%E5%AE%9D%E8%80%83%E8%80%83%E4%BD%A0:%20%E8%B0%83%E5%91%B3%E5%93%81%E2%80%9C%E9%B1%BC%E9%9C%B2%E2%80%9D%E7%9A%84%E6%AC%A1%E8%A6%81%E6%9D%90%E6%96%99%E6%98%AF%E7%94%9A%E4%B9%88%1F%07%EF%BC%9F%E8%9A%82%E8%9A%81%E5%BA%84%E5%9B%AD5.19%E6%97%A5%E8%B0%9C%E5%BA%95
