CSS-动画

三要素

• 需要执行哪个动画
• 需要自己创建一个名称叫做move的动画
• 动画持续的时长

div{
    width: 100px;
    height: 50px;
    background-color: red;
    /*transition-property: margin-left;*/
    /*transition-duration: 3s;*/

    /*1.告诉系统需要执行哪个动画*/
    animation-name: move;
    /*3.告诉系统动画持续的时长*/
    animation-duration: 3s;
}
/*2.告诉系统我们需要自己创建一个名称叫做move的动画*/
@keyframes move {
    from{
        margin-left: 0;
    }
    to{
        margin-left: 500px;
    }
}

属性

@keyframes

规定动画

animation

所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name

规定 @keyframes 动画的名称

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0

animation-timing-function

规定动画的速度曲线。默认是 “ease”

linear	动画从头到尾的速度是相同的
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值 可能的值是从 0 到 1 的数值。

animation-delay

规定动画何时开始。默认是 0

animation-iteration-count

规定动画被播放的次数。默认是 0
无限次:infinite

animation-direction

规定动画是否在下一周期逆向地播放。默认是 “normal”

normal	动画应该正常播放

alternate 动画应该轮流反向播放

animation-play-state

规定动画是否正在运行或暂停。默认是 “running”

paused	规定动画已暂停
running	规定动画正在播放

animation-fill-mode

规定对象动画时间之外的状态

取值:

• none: 不做任何改变
• forwards: 让元素结束状态保持动画最后一帧的样式
• backwards: 让元素等待状态的时候显示动画第一帧的样式
• both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

动画属性连写格式

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

简写 : animation:动画名称 动画时长;

div {
    width: 100px;
    height: 50px;
    background-color: red;
    /*animation: move 3s linear 2s 1 normal;*/
    animation: move 3s;
}