CSS3左右间歇晃动效果

时间 2019-11-20

标签 css3 css 左右间歇晃动效果栏目 CSS 繁體版

原文原文链接

今天在作一个活动页面时，产品想要在页面中添加一个吸引人注意的小图片左右晃动的效果，而且该效果是间歇执行的。我一想应该挺简单的吧，二话没说就答应了，谁知在真正实现的时候才发现仍是有些许困难的。因而就在网上各类找资料，找的过程当中，只是发现了能够左右晃动摇摆的css3动画效果，却没有能够间歇执行的相似的动画效果。最后我想到了之前写的一个能够间歇向上无缝滚动的css3的效果，拿来一试，也不行。最后在SegmentFault上有个同行的一段代码提醒了我，因而就有了如下能够实现间歇左右晃动的css3效果。代码以下：css

.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);
    }
}

原理就是首先将完成动画效果的时间设置的长一点，在文中也就是3s，而后在动画开始的几秒钟内不作任何动做，也就是在0%到65%之间不作任何动做，让它的rotate角度一直是0deg（其实在0%到65%之间时左右晃动的动画也在执行，只是晃动的角度一直是0deg，因此在这个进度内咱们看不出来实际的动画效果），等动画的进度到了70%时再开始动做，那么剩余的时间就是咱们能看到的左右晃动动画的执行时间了。css3

感谢https://segmentfault.com/q/1010000000321090这里的网友的解答给出的灵感。web

如下附上源代码：segmentfault

CSS3间歇左右晃动效果css3动画