【CSS】ボヨヨンと伸縮するCSSアニメーション

2018年7月10日2019年6月12日CSS,CSSアニメーション

アニメーションキーフレームを利用した要素をボヨヨンと伸縮させるCSSアニメーションのサンプルです

伸縮アニメーションの動作サンプル

See the Pen Elasticity element CSS Animation by yochans (@yochans) on CodePen.

伸縮

伸縮アニメーションのサンプルコード

HTML

<p class="item">Elasticity</p>

CSS

.item{
  width:100px;
  margin:50px;
  padding:10px;
  background:#ff6a69;
  color:#FFF;
  text-align:center;
  animation: elasticity 1.5s ease infinite alternate;
}

@keyframes elasticity {

  20% {
    transform: scale3d(1.3, 0.7, 1);
  }

  40% {
    transform: scale3d(0.7, 1.3, 1);
  }

  60% {
    transform: scale3d(1.1, 0.8, 1);
  }

  80% {
    transform: scale3d(0.8, 1.1, 1);
  }

  100%{
    transform: scale3d(1, 1, 1);
  }
}

※Android4.4やios8.0までの機種を考慮する場合はwebkitベンダープレフィックスが必要です、Android7や8の時代になってるので当ブログでは付けていません