【CSS】CSS3アニメーションを使用した文章Letters Animated

CSS

January 28, 2017

Letters AnimatedはCSS3アニメーションを使用した文章。

STYLE3適用。

HTML

<head>
  <link rel='stylesheet' href='animations.css'>
</head>

<div class='is-animate style3'>
  <div>V</div>
  <div>O</div>
  <div>Y</div>
  <div>A</div>
  <div>G</div>
  <div>E</div>
  <div>R</div>
</div>

CSS

<style type='text/css'>

.is-animate.style3 > div { animation-name: style3; }

.is-animate > div {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.is-animate > div:nth-child(1) { animation-delay: 0.0s }
.is-animate > div:nth-child(2) { animation-delay: 0.1s }
.is-animate > div:nth-child(3) { animation-delay: 0.2s }
.is-animate > div:nth-child(4) { animation-delay: 0.3s }
.is-animate > div:nth-child(5) { animation-delay: 0.4s }
.is-animate > div:nth-child(6) { animation-delay: 0.5s }
.is-animate > div:nth-child(7) { animation-delay: 0.6s }

</style>

ダウンロードも可能。