CSS3动画的定义-调用-属性-简写属性-速度曲线细节

5.1 动画的基本使用
1.定义动画

	/* 1. 定义动画 */
    @keyframes move {

        /* 开始状态 */
        0% {
            transform: translateX(0px);
        }

        /* 结束状态 */
        100% {
            transform: translateX(1000px);
        }
    }

2.调用动画
/* 动画名称 /
animation-name: move;
/ 持续时间 */
animation-duration: 2s;
3.动画序列
from和to等价于0%和100%
1.可以做多个状态的变化 keyframe 关键帧
2. 里面的百分比要是整数
3. 里面百分比就是总时间的划分
5.2 动画常用属性
属性 描述
@keyframes 规定动画
animation 所有动画属性的简写属性,除了animatio-play-state属性
animation-name 规定@keyframes动画的名称(必须的)
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0 (必须的)
animation-timing-function 规定动画的速度曲线,默认是"ease"
animation-delay 规定动画何时开始,默认是0
animation-iteration-count 规定动画倍播放的次数,默认是1,还有infinite
animation-direction 规定动画是否在下一周期逆向播放,默认是"normal",alternate逆播放
animation-play-state 规定动画是否正在运行或暂停,默认是"running",还有"paused"
animation-fill-mode 规定动画结束后状态,保持forwards回到起始backwards
5.3 动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animation: name duration timing-function delay iteration-count direction fill-mode;
简写属性里不包含animation-play-state
暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用
想要动画走起来,而不是直接跳回来:animation-direction:alternate
盒子动画结束后,停在结束位置:animation-fill-mode:forwards
5.4 速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是"ease"
值 描述
linear 动画从头到尾的速度是相同的,匀速
ease 默认,动画以低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps() 指定了时间函数中的间隔数量(步长)