(1)需要加動畫的節點
.lucky_h_img {
animation: mymove 3s infinite;
-webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
animation-direction: alternate; /*輪流反向播放動畫。*/
animation-timing-function: ease-in-out; /*動畫的速度曲線*/
/* Safari 和 Chrome */
-webkit-animation: mymove 3s infinite;
-webkit-animation-direction: alternate; /*輪流反向播放動畫。*/
-webkit-animation-timing-function: ease-in-out; /*動畫的速度曲線*/
}
(2) css3動畫
@keyframes mymove {
0% {
transform: scale(1); /*開始爲原始大小*/
}
25% {
transform: scale(1.2); /*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.2);
}
}
@-webkit-keyframes mymove /*Safari and Chrome*/ {
0% {
transform: scale(1); /*開始爲原始大小*/
}
25% {
transform: scale(1.2); /*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.2);
}
}