移动端第十一章动画

科技2022-08-13 107

动画

动画属性：animation

animation-name:动画的名字 animation-duration:动画完成一个周期所花费的时间(秒/毫秒) animation-timing-function:动画的速度曲线 (linear ease ease-in ease-out ease-in-out 贝塞尔曲线) animation-delay:动画何时开始 animation-iteration-count:动画被播放的次数 number/infinite(无限循环) animation-direction:动画是否在下一周期逆向的播放 normsl/alternate(反向播放) animation-play-state:动画是否正在运行或暂停 paused(暂停)/running(正在播放) animation-fill-mode:动画时间之外的状态（和延迟连用） -- forwards(保留动画结束时的状态) -- backwards(不会保留动画结束时的状态) -- both(上面两种状态都有)

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; /*动画名字（动画的名字要有语义化）*/ /*animation-name:movedh ;*/ /*动画完成的时间*/ /*animation-duration: 1s;*/ /*动画播放次数*/ /*animation-iteration-count: 3;*/ /*animation-iteration-count: infinite;*/ /*综合写法*/ animation: movedh 1s 2s infinite; } div:hover{ /*播放/暂停*/ animation-play-state:paused; } /*关键帧*/ @keyframes movedh{ from{ width: 100px; } to{ width: 1000px; } } </style> </head> <body> <div></div> </body> </html>

规定动画

@keyframes name{ from{} to{} } @keyframes name{ 0%{} 10%{} 20%{} 30%{} 40%{} 50%{} 60%{} 70%{} 100%{} }

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap{ width: 500px; height: 500px; border: 1px solid red; margin: 100px auto; position: relative; } .box{ width: 100px; height: 100px; background: yellow; position: absolute; animation: movedh 2s infinite alternate; } @keyframes movedh{ 0%{ left:0; top:0; } 25%{ left:400px; top:0; border-radius:50% ; background: -webkit-linear-gradient(red,blue); } 50%{ left:400px; top:400px; } 75%{ left:0px; top:400px; border-radius:50% ; } 100%{ left:0px; top:0; } } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> </body> </html>

Processed: 0.010, SQL: 8