css3动画上下跳动 , 放大缩小, 旋转

// 上下跳动
animation: pinyi 1s ease-in-out alternate infinite;
@keyframes pinyi {
0% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
// 放大缩小
animation: tiaobig 1s ease-in-out alternate infinite;
@keyframes tiaobig {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
/* // 旋转动画动画 */
animation: dotted-spin 2s linear infinite;
@keyframes dotted-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
原文地址:https://www.cnblogs.com/lihong-123/p/11103962.html