1.动画的基本使用
制作动画分两步:1.先定义动画2.在使用(调用)动画
1.keyframes 定义动画(类似定义类选择器) @keyframes 动画名称{ 0%{ width:100px; } 100%{ width:200px; } } @keyframes 动画名称{ from{ transfrom:translate(0,0); } to{ transfrom:translate(1000px,0); } }
2.动画的常用属性
属性 描述 @keyframes 规定动画 animation 所有动画属性的简写属性,除了animation-play-state属性 animation-name 规定keyframes动画的名称。(必须的) animation-duration 规定动画完成一个周期花费的秒或者毫秒。默认是0,(必须的) animation-timing-function 规定动画的速度曲线,默认是“ease” animation-delay 规定动画何时开始,默认是0 animation-iteration-count 规定动画被播放的次数,默认是1,还有infinite animation-direction 规定动画是否在下周期逆向播放,默认是“normal”alertnate逆向播放 animation-play-state 规定动画是否存在运行或者暂停,默认是running,还有pause animation-fill-mode 规定动画结束后状态,保持forward回到backwards 3.动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
4.速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是ease
值 描述 liner 动画从头到尾的速度是相同的,匀速 ease 默认,动画以低速开始,然后加速,在结束前变慢 ease-in 动画以低速开始 ease-out 动画以低速结束 ease-in-out 动画以低速开始和结束 steps() 指定了时间函数中的间隔数量(步长)