html animation 属性,css3学习--css3动画详解一(animation属性）

***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~

Keyframes介绍：

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{

0%{

background: red;

}

100%{

background: green;

}

}

animation

animation: [name/动画名称] [duration/动画时间] [timing-function/动画周期(ease)] delay[动画延时] [iteration-count/动画播放次数] [direction/指定是否应该轮流反向播放动画] [fill-mode/规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式] [play-state/指定动画是否正在运行或已暂停];

属性

属性单独使用

属性作用

属性可选值

name

动画名称(@keyframes name)

@keframes name

duration

动画运行时间(1s)

参数num(1s or 0.5s)

timing-function

设置动画将如何完成一个周期

- linear [动画从头到尾的速度是相同的]

- ease [默认。动画以低速开始&#