CSS3でパラパラアニメ
- スプライト画像を利用したCSS3を使ったパラパラアニメの作り方。
HTML
<div class="anime"><img src="[画像のURL]" alt=""></div>
SCSS
.anime{ width: 160px; height: 300px; overflow: hidden; margin: 100px; img{ margin-top: 0; -webkit-animation-name: anime; -webkit-animation-duration: 1.0s; -webkit-animation-timing-function: steps(4,end); -webkit-animation-iteration-count: infinite; -moz-animation-name: anime; -moz-animation-duration: 1.0s; -moz-animation-timing-function: steps(4,end); -moz-animation-iteration-count: infinite; -ms-animation-name: anime; -ms-animation-duration: 1.0s; -ms-animation-timing-function: steps(4,end); -ms-animation-iteration-count: infinite; } } @-webkit-keyframes anime{ 100% {margin-top: -1200px;} } @-moz-keyframes anime{ 100% {margin-top: -1200px;} } @-ms-keyframes anime{ 100% {margin-top: -1200px;} }
画像
画像:ドロイドちゃん
ドロイドちゃんgifアニメ003 -歩く横向き- | ドロイドちゃんまとめサイト アンドロイド擬人化無料フリー素材
animation-timing-function
でsteps
を指定すると、なめらかなアニメーションではなく、終着点の値まで飛ぶ事が可能です。
この画像の場合は4コマで作っているので、steps(4,end)
と指定することで終着点までを4分割した値までアニメーションせずに変化します。
.anime img{ margin-top: 0; -webkit-animation-timing-function: steps(4/* コマ数 */,end); } @keyframes anime{ 100% {margin-top: -1200px/* 終着点までの距離(画像の高さ) */;} }