html图片过渡放大,css3图片放大缩小过度动画

(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);

}

}