animation

标签：

animation-name xxx
animation-duration 8s
animation-timing-function linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n) 0到1
animation-delay 0s
animation-iteration-count 1,infinite[无数]
animation-direction alternate
animation-fill-mode forwards

animation-play-state: paused;running
.test{
animation:XXX 8s 1;
}

@keyframes XXXX
{
0% {transform:scale(1);}
11% {transform:scale(1.2);}

22% {transform:scale(1);}
33% {transform:scale(1.2);}

44% {transform:scale(1);}
55% {transform:scale(1.2);}

66% {transform:scale(1);}
77% {transform:scale(1.2);}

88% {transform:scale(1);}
100% {transform:scale(1);}
}
============================================
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
同样适用这参数： 1,infinite[无数]

(1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式

transition: width 2s, height 2s, background-color 2s, transform 2s;
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

img{
height:15px;
width:15px;
display: block;
margin:15px auto;
transition:1s height;
}

img:hover{
height: 450px;
width: 450px;
}

animation

标签：

原文地址：http://www.cnblogs.com/jayruan/p/5199719.html