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

  基本抖动

• ℇ

  抖动不停