【CSS】ボーダーをヌルッと動かす方法。

ボーダーをヌルッと動かしましょう。

今回はCSSのアニメーションを使用しボーダーをヌルッと動かしてみます。

コード

index.html

<h1 class="test">Test</h1>

style.css

.test{
    overflow: hidden;
}

.test::after{
    border-bottom: 2px solid #000;
    content: "";
    position: relative;
    display: block;
    width: 0%;
    animation: up 2s infinite ease-in-out;
    -webkit-animation: up 2s infinite ease-in-out;
}

@keyframes up {
    0% { width: 0%;}
    50% { width: 100%; left: 0px;}
    100% { left: 100%; width: 100%; opacity: 0.2;}
}

@-webkit-keyframes up {
    0% { width: 0%;}
    50% { width: 100%; left: 0px;}
    100% { left: 100%; width: 100%; opacity: 0.2;}
}

たったこれだけです。

考え方

まず**::after**で文字の下にボーダーをつけましょう。
これが::beforeなら文字の上にボーダが付きます。

そして、afterの中にconntent: "";と書くことにより空白を作ります。
この空白がないとボーダー君は何を基準にボーダーになれば良いのか分からないので、表示されません。

この時点ではwidth: 0;にしておきましょう。
fadeInさせる時display; none:にするじゃないですか？
あのような意味合いです。

その次にアニメーションですね！
animation: 〇〇(好きな名前) 2s infinite ease-in-out;
こちらの意味としましては
・一回の処理に2秒用います
・無限に繰り返します
・始まりと終わりだけゆっくり動きます
と言った具合です。

-webkit-これはベンダープレフィックスと言ってブラウザの違いによる表示の不具合を防ぐためのものですね。
・-webkit- Chrome, Safari 5
・-moz- Firefox 9
・-o- Opera 12
・-ms- IE
※今は-webkit-だけでもいいらしいです。そのベンダープレフィックス、いつまでつけてるの？

そして、@keyframesでアニメーションにどんな処理をさせるかを追記していきます。

style.css

@keyframes up {
    0% { width: 0%;}
    50% { width: 100%; left: 0px;}
    100% { left: 100%; width: 100%; opacity: 0.2;}
}

0%,50%,100%となってるのは時間を%で表しています。
なので、今回は2秒と設定しているのでその間にこちらの処理を行います。

50%の時点でwidth: 100%にしてleftの登場です。
今回のキモはこのleftの処理とoverflow: hidden;です。

そして100%になるとleft: 100%;にしています。
このleftの処理とoverflow: hidden;を合わせることによって端にたどり着いた瞬間に短くなって、消えていくように見せています。
気になる方はoverflow: hidden;をのけてみてください。
理屈がわかると思います。

では、またの投稿をお楽しみに。