1.360度一直旋转动画
<img class="rotate" src="../circle.png"/>
.rotate {
transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
@keyframes rotation {
from {-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
2.放大动画
<img class="ballon" src="../circle.png"/>
@keyframes scaleDraw {
0%{
transform: scale(1);
opacity:1;
}
100% {
transform: scale(1.3);
opacity:0.4;
}
}
.ballon{
animation-name: scaleDraw;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
}