【アニメーションCSS】要素を上下左右に動かす方法

今回は要素を上下や左右に動かすアニメーションについて紹介していきたいと思います。

要素を上下左右に動かすアニメーション

上下に動かすにアニメーション

html

<div class="shake-effect shake-effect-tb"></div>

css

.shake-effect{
        width: 150px;
        height: 150px;
}

.shake-effect-tb{animation: shakeEffectTb .50s linear infinite; background: #eee;}

@keyframes shakeEffectTb {
  0% {transform: translateY(0);}
  33% {transform: translateY(-10%);}
  66% {transform: translateY(10%);}
  100% {transform: translateY(0);}
}

サンプル

左右に動かすアニメーション

html

<div class="shake-effect shake-effect-lr"></div>

css

.shake-effect{
        width: 150px;
        height: 150px;
}

.shake-effect-lr{animation: shakeEffectLr .50s linear infinite; background: #aaa;}

@keyframes shakeEffectLr {
  0% {transform: translateX(0);}
  33% {transform: translateX(-10%);}
  66% {transform: translateX(10%);}
  100% {transform: translateX(0);}
}

サンプル