【CSS】バウンドする文字や要素のCSSアニメーション

2018年3月31日CSSCSSアニメーション

小さくバウンドする文字

NARUHODO

html

<p class="item_text">NARUHODO</p>

CSS

.item_text{
  animation: key1 .3s ease infinite alternate;
}

@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

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

2018年3月31日CSSCSSアニメーション

Posted by Yousuke.U