fotodeo

先日jQueryを使わずにCSSのみでアニメーションをする記事を書きました。
（内容はこちら）

アニメーションの起動スイッチがWeb 画面のロードなのでアニメーションを画面に入ってからスタートさせるには結局jQueryなどが必要になるのでボタンの上にマウスが来た時にアニメーションをさせてみようと思って色々サンプルを作ってみました。

まずはこちら

これらのボタンはすべて昨日のanimetionプロパティで動いています。

リンクのhover要素にアニメーションを掛けています。
実のところこのサンプルのような簡単な動作にはあまり必要ではなく、transitionプロパティを付ければもっとスマートに実現できます。ですが、最後の「移動」の動作をするボタンについては違います。

ではそれぞれについて説明していこうと思います。ちなみに前回同様test-〇〇のCSSは特に必要のないレイアウト調整用です。

-css-

<style type="text/css">
    #test-contents{padding:2%;}
    .test-column{max-width: 500px;width: 90%; margin: 0 auto;}
    .test-button{
        width: 50%;
        height: 30px;
        vertical-align: middle;
        text-align: center;
        margin: auto;
        border: 1px solid #ddd;
        border-radius: 15px;
        overflow: hidden;
        
    }
    .test-column a:link {display: block;}
</style>

最初にこの部分が付きますが全部同じなので端折ります。

-HTML-

<section class="test-column">
        <a><div class="test-button eff-〇〇">
            <h3>TEST button</h3>
        </div></a>
    </section> 

html部も基本的には全部同じですがdivについているクラスの「eff-〇〇」部だけを必要な効果に変えたら良いだけですので以下効果のCSSのみ説明していこうと思います

フェードイン

<style type="text/css">
.test-column a:hover .eff-fadein{animation: effect-in 0.5s ease 0s 1 normal;
    }
    @keyframes effect-in { 
        0% {background: #fff;} 
        100% {background: #fdd;} 
    }
</style>

前回の記事ではopacityでフェードイン、アウトを調整しました。ですが今回は背景色を白から赤に変える方法で表現しました。

理由はopacityを使うと要素全体に適応されてしまうので文字までフェードイン指定まうからです。

拡大

<style type="text/css">
    .test-column a:hover .eff-kakudai h3{animation: effect-big 0.5s ease 0s 1 normal;animation-fill-mode: forwards;}
    @keyframes effect-big { 
        0% {transform: scale(1);} 
        100% {transform: scale(1.5);} 
    }
</style>

文字のみ変化を付けたかったのでeff-kakudaiの子要素のH3に対して効果をつけています。

変化のさせ方はtransform: scale(1)で１は１００％の意味で、1.5倍に表示されるようにしています。

ムーブ

<style type="text/css">
    .test-column a:hover .eff-move{animation: effect-top 0.5s ease 0s 1 normal;animation-fill-mode: forwards;}
    @keyframes effect-top { 
        0% {transform: translateY(0px);} 
        100% {transform: translateY(-3px);} 
    }
</style>

これはボタン全体を上に3pxほど動かすようになっています。プロパティは「transform: translateY(0px)」を使用します。translateXを使用すれば横にも動かせます。

回転

<style type="text/css">
     .test-column a:hover .eff-rot h3{animation: effect-rot 0.3s ease 0s 1 normal;}
    @keyframes effect-rot { 
        0% {transform: rotate(0);} 
        100% {transform: rotate(360deg);} 
    }
</style>

回転はボタンの中のみで文字を回転させて、はみ出す部分は表示しないようにしています。
はみ出す部分を表示させないというプロパティは最初に共通部分のCSSですという説明の中でtest-buttonのプロパティに「overflow：hidden;」を付けています。
これはtest-butonのサイズからはみ出す部分は表示させないという意味です。

そして肝心の文字の回転は「transform: rotate(0);」で1回転させるには360となり、単位はdegを使っています。

縦回転

<style type="text/css">
     .test-column a:hover .eff-rot_y h3{animation: effect-roty 1.2s ease 0s 1 normal;}
    @keyframes effect-roty { 
        0% {transform: rotateY(0);} 
        100% {transform: rotateY(360deg);} 
    }
</style>

こちらも回転系なのですが縦に回転させてみようという事で「transform: rotateY(360deg)」を使用しています。
察しの良い方なら横回転の方法も分かるかと思います(*´艸｀)

ぼかし

<style type="text/css">
     .test-column a:hover .eff-gaus h3{animation: effect-boke 0.2s ease 0s 1 normal;animation-fill-mode: forwards;    
    }
    @keyframes effect-boke { 
        0% {filter: blur(0);} 
        100% {filter: blur(3px);} 
    }
</style>

今度は文字をぼかしてみました。プロパティは「filter: blur(3px);」となっています。数字が大きくなればそれだけボケていきます。

そしてここで初めてtransformではなくfilterプロパティを使っています。
そう、変化をつけるためなら最初の背景色でフェードインを表現したように色々試してアクションを作っていけるんですね。

移動

<style type="text/css">
     .test-column a:hover .eff-run h3{animation: effect-move 1.2s ease 0s infinite normal;    
    }
    @keyframes effect-move { 
        0% {transform: translate(0px, 0px);}
        20% {transform: translate(-3px, 0px);}
        40% {transform: translate(-3px,3px);}
        60% {transform: translate(6px, 3px);}
        80% {transform: translate(6px, 0px);}
        100% {transform: translate(0px, 0px);}
    }
</style>

では最後にanimetionでキーフレームを作ってボタンにしてみた理由がここにあります。

HOVERにtransitionを付けて色々しようとプロパティを付けてしまうと一度に変化してしまいます。

ですが、アニメーションプロパティを使うとキーフレームの設定が出来るんです。
今までは０％と100%の指定しかしていませんでしたが、ここでは２０％事の変化を指定していく事が出来ます。

ちなみに「transform: translate(0px, 0px)」はXとY座標を一度に移動さすことが出来ます。

最後の味付け

さて、最後まで読んでいただけた方にもう一つ大切な説明があります。もう一度初めのフェードインのボタンを試してもらえれば分かるかと思いますが、マウスオーバーでボタンが赤くなりますがアニメーションが終わると元の白に戻ってしまいます。

アニメーションの仕様として1回実行したので元の状態に戻る。すなわち背景が０％の白に戻るんです。

しかし、「移動」を除いた他のボタンたちはマウスオーバーする限り最後の状態で止まっています。
答えは

　animation-fill-mode: forwards;

にarimasu.[eff-〇〇]の中にこのコードがあるものはキーフレームの最後で止まるようになっています。なのでフェードインボタンにもこれを付ければマウスオーバーで赤いまま止まるようになります。

そしてもう一つ「移動」アクションのボタンはマウスオーバーする限り動き続けています。これはanimationプロパティーの要素を1回再生ではなくinfiniteになっているのでループし続けるようになっているのです。

まとめ

HOVERのアクションについて単純な動作では簡単な方法がありますが、animationのボタンにする利点を「移動」ボタンで見てもらえたかと思います。

時系列ごとにアクションを変える事が出来たり、マウスオーバーする限り繰り返すなど、いろんな動作を組み合わせれば凝った演出も可能になります。

私のサイトのリンクも一部マウスホバーで下線が両サイドに広がるものなどを指定してたりします。

機会があればいろんなマウスアクションを紹介していけたらと思います。