CSS3：アニメーションを使って遊んでみるvol.3
さて、今日は珍しく使いどころのありそうなアニメーションを作ってみました。animationの使いどころを日々模索しているのですが…なかなか指示になれず前に進みません。
とりあえず色々と作ってみて、使えそうな場所を探すという逆転の発想に至り、色々と試していこうと思います。
今回は’animation-duration’と’animation-delay’の２つを用いてみようと思います。
KEY SENTENCE
[1] はじめに
[2] 実装手順
[3] おまけに
[1] はじめに
こんなのを作ってみようと思います。
example.) Loading Bar
ローディングバーですね。CSSだけで実装できるので、ローディング画面意外にもちょこちょこ要素として出現させてもいいかもしれません。多様するというよりか、ポイント使いで差をつける。ファッションみたいなもんですね。
[2] 実装手順
ここではexample01.の実装方法を説明していこうと思います。
HTML
<div class="loading-bar-box">
<div class="bg-stripe"></div>
</div>
CSS
.loading-bar-box {
position:relative;
width:100%;
height:30px;
overflow:hidden;
}
.loading-bar-box::before, .loading-bar-box::after {
position: absolute;
z-index: 3;
content: '';
width: 20px;
height: 100px;
background:#fff;
}
.loading-bar-box::before {
top:0;
right:0;
}
.loading-bar-box:after {
top:0;
left:0;
}
.bg-stripe {
margin: 0;
padding: 15px 15px;
background-color: #53727d;
background-image: -webkit-linear-gradient(-45deg, #455765 25%, transparent 25%, transparent 50%, #455765 50%, #455765 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, #455765 25%, transparent 25%, transparent 50%, #455765 50%, #455765 75%, transparent 75%, transparent);
background-size: 20px 20px;
-webkit-animation: move .25s linear infinite;!important
-moz-animation: move .25s linear infinite;!important
animation: move .25s linear infinite;!important
}
@-webkit-keyframes move {
0% { transform:translateX(0px); }
100% { transform:translateX(20px); }
}
@-moz-keyframes move {
0% { transform:translateX(0px); }
100% { transform:translateX(20px); }
}
@keyframes move {
0% { transform:translateX(0px); }
100% { transform:translateX(20px); }
}
これで実装完了です。
先日別の記事で作ったストライプ要素をtransform:translateX();で斜線の大きさ分だけ等速で動かし、両端を囲ったdiv要素を被せて移動分を隠せば完了です。
今回作ってみた例だと、ローディング用の素材などに使えそうですね。
まだまだ奥が深いanimationタグ。
徐々にサンプルを増やしていこうと思います。
[3] おまけに
position:absolute;を使って、動きのある枠線とかも作れますね。
ちょこちょこ使いどころをみつけて使っていきたいところです。
そんな感じで今回はここまで
Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)
