transition animation

trantion：proterty duration timing-function delay ;

　　　　过渡的css属性 过渡时间 过渡曲线 延迟

 

 

animation ： name duration timing-function delay iteration-count direction;

　　　　　　动画名   动画所花费的时间，以秒或毫秒计   动画的速度曲线    延迟      播放次数 是否轮流方向播放动画

 

 

动画写法

 

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}