【CSS】小刻みに震えるCSSアニメーション

2019年4月18日CSS

小刻みに震えるCSSアニメーション

小さく小刻みに震えるCSSアニメーションのサンプルコードです

animationプロパティ、@keyframesを利用しています

小刻みに震えるdiv要素のCSSアニメーション

See the Pen CSS Shake in small steps animation by yochans (@yochans) on CodePen.

HTML

<div class="shake"></div>

CSS

.shake{
  animation: shake .1s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(-3%);
  }
  
  80% {
    transform: translateX(3%);
  }

  100% {
    transform: translateX(0);
  }
}

小刻みに震える文字のCSSアニメーション

文字の場合は、読める範囲にアニメーション速度や動作範囲を調節します

See the Pen CSS Shake in small steps animation by yochans (@yochans) on CodePen.

HTML

<p class="shake">小刻みに震える</p>

CSS

.shake{
  animation: shake .15s linear infinite;
  font-size:50px;
  font-weight: bold;
  margin:20px;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(-0.5%);
  }
  
  80% {
    transform: translateX(0.5%);
  }

  100% {
    transform: translateX(0);
  }
}

2019年4月18日CSSCSSアニメーション

Posted by ヨウスケ