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

Letters AnimatedはCSS3アニメーションを使用した文章。
STYLE3適用。
<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>
<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>
ダウンロードも可能。