Skip to content Skip to sidebar Skip to footer

一个左右间歇摇摆的特效

.cake{animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;transform-origin:bottom;-webkit-transform-origin:bottom;}

@keyframes move
{
    0%, 65%{ 
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
    }
    70% {  
      -webkit-transform:rotate(6deg);
      transform:rotate(6deg);
    }
    75% {  
      -webkit-transform:rotate(-6deg);
      transform:rotate(-6deg);
    }
    80% {  
      -webkit-transform:rotate(6deg);
      transform:rotate(6deg);
    }
    85% {  
      -webkit-transform:rotate(-6deg);
      transform:rotate(-6deg);
    }
    90% {  
      -webkit-transform:rotate(6deg);
      transform:rotate(6deg);
    }
    95% {  
      -webkit-transform:rotate(-6deg);
      transform:rotate(-6deg);
    }
    100% {  
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
    }
}

@-webkit-keyframes move
{
    0%, 65%{ 
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
    }
    70% {  
      -webkit-transform:rotate(6deg);
      transform:rotate(6deg);
    }
    75% {  
      -webkit-transform:rotate(-6deg);
      transform:rotate(-6deg);
    }
    80% {  
      -webkit-transform:rotate(6deg);
      transform:rotate(6deg);
    }
    85% {  
      -webkit-transform:rotate(-6deg);
      transform:rotate(-6deg);
    }
    90% {  
      -webkit-transform:rotate(6deg);
      transform:rotate(6deg);
    }
    95% {  
      -webkit-transform:rotate(-6deg);
      transform:rotate(-6deg);
    }
    100% {  
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
    }
------------------------------------------------------------------------------------
.cake{
        animation:move 3s 0s infinite;
        transform-origin:top;
    }
    @keyframes move{
    0%,65%{ 
      transform:rotate(0deg);
    }
    70% {  
      transform:rotate(30deg);
    }
    75% {  
      transform:rotate(-30deg);
    }
    80% {  
      transform:rotate(30deg);
    }
    85% {  
      transform:rotate(-30deg);
    }
    90% {  
      transform:rotate(30deg);
    }
    95% {  
      transform:rotate(-30deg);
    }
    100% {  
      transform:rotate(0deg);
    }
} 

Leave a comment