本文收录一个来自alipay活动页的动画:
核心代码:
@keyframes scale {
0% {
transform: scale(1);
}
1% {
transform: scale(1.15);
}
2% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(1);
}
1% {
-webkit-transform: scale(1.15);
}
2% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes scale {
0% {
-moz-transform: scale(1);
}
1% {
-moz-transform: scale(1.15);
}
2% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(1);
}
}
.scale {
transform: scale(1);
-webkit-transform: scale(1);
animation: scale 5s linear 0s infinite;
-moz-animation: scale 5s linear 0s infinite;
-webkit-animation: scale 5s linear 0s infinite;
}
具体事例:
http://jsfiddle.net/zhangyaochun/8sjs5/