メニュー開閉アニメーションボタン
2015年05月03日(日) 16時23分
アップルのスマホサイトのメニュー開閉を行うボタンのように、メニュー開閉の状態に応じてアイコンがアニメーションするボタンを作ってみます。
解説
特に説明の必要も無いかもしれませんが、:beforeと:after要素で作成した2本の横棒を次回経過と共にアニメーションさせています。
動作サンプル
サンプルコード
※ この例では、ボタンをクリックした時にCSS3のtransform: translateY(0px) rotate(135deg);を0.3秒かけて(transition: transform 0.3s;)アニメーションしますが、Y方向への移動と、回転のアニメーションが同時に派生してしまうので、上記例に挙げた本家Appleとは動きが若干異なります。
アニメーション動作も近づけるためには、まずY方向移動を完了させた後に、回転のアニメーションに移る形になります。単純なCSS3では実現ができないので、keyframeを使うか、jQueryなどを使う形に
アレンジ
この例では2本のバーを動かしていますが、3本、4本と増やしていくとさまざまなバリエーションに発展させることができると思います。
// ボタン外枠
.apple-button {
position: relative;
display: block;
width: 50px;
height: 50px;
background-color: transparent;
background-color: #616161;
outline: none;
border: none;
cursor: pointer;
margin: 0;
z-index: 100;
}
// ボタン内2本線
.apple-button::before,
.apple-button::after {
position: absolute;
left: 0;
width: 70%;
height: 4px;
background-color: #FFF;
content: "";
transition: transform 0.3s;
margin-left: 15%;
}
// ボタン初期状態
.apple-button::before {
transform: translateY(-12px);
}
.apple-button::after {
transform: translateY(8px);
}
// ボタンクリック時
.apple-button.menu-open::before {
transform: translateY(0px) rotate(135deg);
}
.apple-button.menu-open::after {
transform: translateY(0px) rotate(-135deg);
}