CSS3中的2D动画的常用属性

2D动画的常用属性

常用属性的用法

@keyframes

@keyframes move {
            0% {
                transform: translate(0,0);
            }
            100% {
                transform: translate(500px,0);
            }
        }

在使用动画效果的时候要先创建一个动画，所以在创建动画是就是使用@keyframes+动画名称进行创建

animation-name

animation-name: move;

创建完动画后就是要在需要使用动画效果的元素上调用需要动画效果的动画名称。这个属性是必须写的。例如：进行对动画效果的调用。

div {
    widht: 100px;
    height: 100px;
    background-color: #09f;
    animation-name: move;
}

animation-duration

animation-duration: 2s;

对名称调用后，需要指定动画的运行时间，否则是不会执行动画效果的，所以这个属性也是必须写的，单位为s(秒)或者(ms)毫秒。例如：

div {
    widht: 100px;
    height: 100px;
    background-color: #09f;
    animation-name: move;
    animation-duration: 2s;
}

animation-timing-function

animation-timing-function: ease;

规定动画的运动速度曲线，常用的属性值有：

animation-delay

animation-delay: 1s;

规定动画何时开始运行，打开页面后动画不会立即执行而是在1秒后才开始。

animation-iteration-count

animation-iteration-count: 2;

规定动画运行几次，默认为1.可以设置其他次数或者infinite无限次

animation-direction

animation-direction: alternate;

规定动画结束后是否反方向运行，因为动画结束后会立即返回到原点，可以设定反方向运行，让他返回的不那么跳脱。默认是normal：不反方向播放

animation-fill-mode

animation-fill-mode: forwards;

规定动画结束后是返回起点还是留在结束的位置，默认是backwards返回起点，forwards留在结束的位置。

注意：在使用这个属性的时候不能使用animation-direction和animation-iteration-count属性，否则会发生冲突

animation-play-state

animation-play-state: paused;

指定动画是处于运行running还是暂停paused状态，可以利用hover等时机对他进行设置，这个属性不能与其他属性一起进行简写。

常用属性的综合写法

animation: name(动画名称) duration(持续时间) timing-function(动画曲线)delay(何时开始) iteration-count(播放次数) fill-mode(结束停留位置);

除了name和duration为必须属性，其他都可以不写，为默认值;*animation-play-state*不能简写。