【CSS】アニメーションメニュー(CSS3 Animation Menus)＜２＞

下記のアニメーションメニュー(CSS3 Animation Menus)は、Javascriptは一切使わず、CSSだけで実行したものです。こちらのサイトに掲載されているアニメーションメニューです。オリジナルソースとは若干違います。

下記のリストメニューにマウスオーバーしてみるとわかりますが、アイコンとメインタイトル、サブタイトルそれぞれが変化します。

リストメニューの基本構造は親要素の<ul>と子要素の<li>の組み合わせです。まずul要素を指定します。

 ul{
    padding: 0;
    margin: 20px auto;/*中央寄せに指定*/
    width: 100%;
    }

各リストメニュー<li>要素の基本枠を指定します。「-webkit-」「-moz-」などのベンダープレフィックスの記述は省略します。

 ul li{
    width: 100%;
    height: 100px;
    overflow: hidden;/*ボックスの範囲内に内容が入りきらず、はみ出た部分は表示しない*/
    display: block;/*ブロック要素の表示でメニューを縦型にする*/
    background: #fff;/*背景は白*/
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);/*メニューの外枠に影をつける*/
    margin-bottom: 5px;/*下のメニューとの間隔*/
    border-left: 10px solid #000;	/*メニューの左先頭は黒色・厚さは10pxに指定*/
	transition: all 300ms linear;
    /*メニューにマウスオーバーしたときにtransitionアニメーションを指定する*/
    /*linear：開始から終了まで同じスピード*/
}

最後のリストメニューと<a>リンク要素についてのCSSを指定します。

 ul li:last-child{
    margin-bottom: 0px;
    /*最後のメニューの下マージンを0pxに指定*/
    }
 ul li a{ /*リンク要素の指定*/
	position:relative;/*相対位置に指定。これがアイコンとタイトルの基準位置になる*/
    text-align: left;/*左寄せに配置*/
    display: block;
    width: 100%;/*マウスオーバー時にメニューの幅全体がリンク対象になる*/
    height: 100%;/*マウスオーバー時にメニューの高さ全体がリンク対象になる*/
    color: #333;/*文字色*/
    }

メニューの左に表示されるアイコンについてCSSを指定します。ここで使われているアイコンは「Fontawesome」から引っ張ってきました。相対位置に指定したメニューの<a>リンク要素を基準にアイコンを絶対位置(position: absolute;)に指定します。

 .icons{
	position: absolute;/*絶対位置に指定*/
	font-size: 30px;
	text-shadow: 0px 0px 1px #333;/*文字に影をつける*/
	line-height: 90px;/*行の高さを指定*/
	width: 90px;
	left: 20px;
	text-align: center;
	transition: all 300ms linear;/*linear：開始から終了まで同じスピードのアニメーション*/
    }

メインタイトルとサブタイトルの枠のサイズと位置を指定します。相対位置に指定したメニューの<a>リンク要素を基準にアイコンを絶対位置(position: absolute;)に指定します。

 .sub-menubar{
	position:absolute;/*絶対位置に指定*/
	left: 125px;
	width: 100%;
	height: 60px;
	top:25px;
    }

メインタイトルとサブタイトルのサイズや色を指定します。またマウスオーバーした際のtransitionアニメーションを指定します。

 .titles{
    font-size: 30px;
    transition: all 300ms linear; /*linearアニメーションを指定*/
    }
 .subtitles{
    font-size: 14px;
    color: #666;
    transition: all 300ms linear; /*linearアニメーションを指定*/
    }

メニューにマウスオーバーした際にアイコンとメインタイトル、サブタイトルのそれぞれをどう変化させるかのアニメーションを指定します。

 ul li:hover{
    background: #fff65e;
    }    
    
 ul li:hover .icons{
    color: #259add;
    text-shadow: 0px 0px 13px #fff;
    font-size: 60px;
    opacity: 0.8;
    }
    
 ul li:hover .titles{/*上からから下に移動するアニメーション*/
    opacity: 1;
    color:#2676ac;
    animation: moveFromTop 300ms ease-in-out;
    /*アニメーション名：moveFromTop*/
    /*ease-in-outアニメーションを指定*/
    }
    
 ul li:hover .subtitles{    /*下から上に移動するアニメーション*/
    opacity: 1;
    animation: moveFromBottom 300ms ease-in-out;
    /*アニメーション名：moveFromBottom*/
    /*ease-in-outアニメーションを指定*/
    }

ここからはマウスオーバーした際のメインタイトルとサブタイトルが上下から中央に移動するアニメーションを指定します。この場合は、「@keyframes規則」を使います。ここでは「-webkit-」「-moz-」などのベンダープレフィックスの記述は省略しました。

 @keyframes moveFromTop {　/*タイトルのアニメーション(上から下へ)を指定*/
    from {
        opacity: 0;　/*開始時の文字の透明度は0*/
        transform: translateY(200%);
    }
    to {
        opacity: 1;　/*終了時の文字の透明度は1*/
        transform: translateY(0%);
    }
 }

 @keyframes moveFromBottom {　/*サブタイトルのアニメーション(下から上へ)を指定*/
    from {
        opacity: 0;
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
 }

これからはHTMLソースです。下記のコードのように各リストメニューを記述します。

 <ul>
  <li>
   <a href="#">
   <span class="icons"><i class="fa fa-home"></i></span>
    <div class="sub-menubar">
      <p class="titles">TOP PAGE</p>
      <p class="subtitles">初心者のためのHTMLホームページ</p>
    </div>
   </a>
  </li>
    .
    .
    .
 </ul>

Prev 12Next