CSS发抖

纯CSS发抖 

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

html

<section class="section carrot" style="position: absolute;">
        <h1>抖动方式</h1>
        <ul class="previews">
            <li>
                <i class="preview-item shake">
                    Bs
                    <span class="flip">
                    </span>
                </i>
                <p class="preview-desc">基本抖动</p>
            </li>
        
            <li>
                <i class="preview-item shake shake-constant">
                    ℇ
                    <span class="flip"></span>
                </i>
                <p class="preview-desc">抖动不停</p>
            </li>
        </ul>
    </section>

css

/*绕着图片那个点旋转*/
.shake { display: inline-block;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center; 
}
/*基本抖动*/
.shake:hover { -webkit-animation-name: shake-base;
    -ms-animation-name: shake-base;
    animation-name: shake-base;
    -webkit-animation-duration: 100ms; 
    -ms-animation-duration: 100ms; 
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite; 
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    -ms-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s; 
    -ms-animation-delay: 0s;
    animation-delay: 0s; 
    -webkit-animation-play-state: running; 
    -ms-animation-play-state: running;
    animation-play-state: running; 
  }
  /*抖动不停*/
  .shake.shake-constant { 
    -webkit-animation-name: shake-base;
    -ms-animation-name: shake-base;
    animation-name: shake-base; 
    -webkit-animation-duration: 100ms;
    -ms-animation-duration: 100ms; 
    animation-duration: 100ms; 
    -webkit-animation-iteration-count: infinite; 
    -ms-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    -ms-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s; 
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running; 
 }
 /*keyframes 动画*/
@-webkit-keyframes shake-base {
  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  4% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }
  6% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  8% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  10% { -webkit-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  12% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  14% { -webkit-transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
  16% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  18% { -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  20% { -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  22% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  24% { -webkit-transform: translate(-1.5px, -2.5px) rotate(-1.5deg); }
  26% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  28% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  30% { -webkit-transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  32% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  34% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-1.5deg); }
  36% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  38% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  40% { -webkit-transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  42% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  44% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  46% { -webkit-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
  48% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  50% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  52% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  54% { -webkit-transform: translate(1.5px, 0.5px) rotate(-1.5deg); }
  56% { -webkit-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
  58% { -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
  60% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  62% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-0.5deg); }
  64% { -webkit-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  66% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  68% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  70% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg); }
  72% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  74% { -webkit-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
  76% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  78% { -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg); }
  80% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  82% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  84% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  86% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  88% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  90% { -webkit-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
  92% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  94% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  96% { -webkit-transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
  98% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); } }

 

 

抖动方式

鼠标放上去 开始抖动

• Bs

  基本抖动

• ℇ

  抖动不停