css里的一些动画效果

1、转动效果

animation: amountRotate 10s linear infinite;

@keyframes amountRotate {
    from {
      transform: translate(0) rotate(0deg);
    }
    to {
      transform: translate(0) rotate(360deg);
    }
}

2、心跳动画

animation: scaleDraw 3s ease-in-out infinite;

// 放大缩小
@keyframes scaleDraw {
    0%{
        transform: scale(1); 
    }
    25%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.1);
    }
}

3、往复动画

animation: amountOne 10s linear infinite;

@keyframes amountOne{
    0% {
        transform: translate(0) rotate(0deg);
    }
    50% {
        transform: translate(0) rotate(45deg);
    }
    100% {
        transform: translate(0) rotate(0deg);
    }
}