仅供快速参考，如果想详细了解相关内容，请参阅阮老师的博客 ：
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
css关于动画和变换部分有3个词很容易混淆，分别是transform(变换), translate(平移), transition(过渡)
其中transform和translate常见于如下形式：
.class
{
transform: translate(826px);
}
而transition用于css3的动画，表示过渡效果
1. transition
.class1
{
transition: duration <delay> <property> <timing-function>, an other group;
}
.complete
{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}
2. animation
animation的写法
.class1
{
animation: duration <delay> name <timing-function> <iteration-count> <fill-mode> <direction> <step(n)>;
animation-play-state: play-state;
}
- duration: 1s
- delay: 1s
- name: name
- timing-function: linear | ease-in | ease-out | cubic-bezier
- iteration-count: 10 | infinite
- fill-mode: forwards | none | backwards | both
- direction: normal | alternate | reverse | alternate-reverse
- step(n): step(2) | step(10)
- play-state: running | paused
keyframe的写法
@keyframes rainbow
{
0%
{
background: #c00;
}
50%
{
background: orange;
}
100%
{
background: yellowgreen;
}
}
@keyframes rainbow
{
from
{
background: #c00;
}
50%
{
background: orange;
}
to
{
background: yellowgreen;
}
}
