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;
}