CRI BOOT CAMP
作成日：2021/04/12 更新日：2022/07/04
#2 CSSでアニメーション
jQueryとCSS3でアニメーションを実装する
アニメーションとは、開始の状態と終了の状態（デザイン）を作っておき、開始の状態から何秒かけて、どういった動きで という設定を行い、終了の状態に導くことを指します。transform（トランスフォーム）で図形を変形させる
通常htmlの要素は正方形を含む長方形となりますが、cssのtransformプロパティを使い 図形を「変形」させることができます。
transform: translate() 移動
transform: rotate() 回転
transform: scale() 伸縮
transform: skew() 傾斜
実際の動きは以下のようになります。
▼translate 位置の移動（`翻訳`の意味が有名ですが、移動の意味もあります）
.translate1{ transform: translate(10px,30px) }
.translate2{ transform: translate(-30px,-10px) }
.translate3{ transform: translateX(30%) }
.translate4{ transform: translateY(10px) }
.translate5{ transform: perspective(500px) translate3d(10px, -40px, 100px) } //translate3d(x, y, z)
translate1
translate2
translate3
translate4
translate5
.rotate1{ transform: rotate(45deg); }
.rotate2{ transform: rotate(-45deg); }
.rotate3{ transform: rotateX(180deg); }
.rotate4{ transform: rotateY(-180deg); }
rotate1
rotate2
rotate3
rotate4
.scale1{ transform: scale(1.8, 1.2); }
.scale2{ transform: scaleX(1.4); }
.scale3{ transform: scaleY(1.2); }
.scale4{ transform-style: preserve-3d; perspective: 300px; }
.scale5{ transform: scale3d(1, 1.3, 1.6) rotateY(45deg); }
scale1
scale2
scale3
scale4
scale5
.skew1{ transform: skewX(-20deg); }
.skew2{ transform: skewY(20deg); }
.skew3{ transform: skew(15deg, 10deg); }
.skew4{ transform: skewX(15deg) skewY(10deg); }
.skew5{ transform: skewX(15deg) skewY(-15deg); }
skew1
skew2
skew3
skew4
skew5
transformは設定がやや難しく頭で計算してイメージするのが大変です。 便利なジェネレーターを使って確認してみましょう。 CSS3 Generator
アニメーションのときの最初や最後の「形状」を作るときに使います。
transition（トランジション）で図形を動かす
図形を変形することを覚えたので、アニメーションさせてみましょう。アニメーションで使うプロパティのひとつtransitionを使います。
transition-duration 変化にかかる経過時間
transition-property 変化を適応させたいプロパティを指定
transition-timing-function 変化の中間状態を算出し、変化のタイミングを指定
transition-delay トランジションを開始するまで遅延させる時間
要素を動かすにはまず「開始の状態」と「終了の状態」を作成しておき、クリックやマウスオーバー、画面に出てきたとき、などのタイミングで 「開始の状態」から「終了の状態」にアニメーションさせながら遷移させます。
<div class="selector">なにか</div>
/*開始の状態*/
.selector{width:300px;}
/*終了の状態*/
.selector{width:200px;}
/*開始の状態*/
.selector{
width:300px;
transition: all .8s ease 0s; /* ←開始にtransitionを追記*/
}
/*終了の状態*/
.selector:hover{
width:200px;
}
同じプロパティでは上書きされてしまうだけなので、終了の状態は「:hover」をつけておきます。
transition: transition-property transition-duration transition-timing-function transition-delay;
適応させる要素 変化する時間 イージング系 開始遅延時間;
実際の動きは以下のようになります。
グレーの部分をマウスオーバーしてみましょう。.trans1
transitionなしの場合
transitionなしの場合
.trans2
transitionをつけた場合
transitionをつけた場合
/* 開始時の状態 */
.trans1{
width:300px;
background:#ccc;
}
.trans2{
width:300px;
background:#ccc;
transition: all .8s ease 0s;
}
/* 終了時（マウスオーバーしたとき）の状態 */
.end:hover{
width:200px;
background:#f00;
}
<div>
<div class="trans1 end">trans1</div>
<div class="trans2 end">trans2</div>
</div>
#3 デザインでよく使うtransitionスニペット
マウスオーバーで下線をアニメーションで出す
<ul class="mouse">
<li><a href="">メニューA</a></li>
<li><a href="">メニューB</a></li>
<li><a href="">メニューC</a></li>
</ul>
.mouse{
display:flex;
align-items: center;
}
.mouse li{
margin:0 20px;
background-color:#ddd;
}
.mouse li a{
display:block;
padding:10px 20px;
position: relative;
}
.mouse li a::after{
position: absolute;
bottom: 0;
left: 0; /* right:0;にすると右から線が出ます */
content: "";
border-bottom: solid 2px #f00;
transition: all .3s ease;
width: 0%;
}
.mouse li a:hover::after{
width:100%;
}
幅いっぱいまで伸びる線
適当なhtmlファイルを作って実装してみましょう
$(function() {
$('.btn3').on('click', function() {
$('.trans3').toggleClass('active');
});
});
<body>
<button class="btn3">トリガー[クリック]</button>
<div style="height:200px;">
<div class="trans3"></div>
</div>
</body>
.trans3{
width:0%; /* 開始時の状態 */
height:1px;
background:#F00;
transition: all .8s ease 0s;
}
.trans3.active{
width:100%; /* 終了時の状態 */
}
背景画像がフェードインして、ベタ塗りが幅いっぱいまで伸びて閉じる
$(function() {
$('.btn4').on('click', function() {
$('.trans4').toggleClass('active');
});
});
<button class="btn4">トリガー[クリック]</button>
<div class="trasn4-container">
<div class="trans4"></div>
</div>
/*全体のコンテナ*/
.trasn4-container{
position:relative;
overflow: hidden;
}
/*背景画像の設定*/
.trans4{
opacity:0; /*初期値は見えなくしておく*/
height:250px;
position:relative;
display: block;
background: url('../images/bg.jpg')no-repeat center center/cover;
transition: all .8s ease 0s; /*背景画像のアニメーション設定*/
}
.trans4.active{
opacity:1; /*activeクラス付与で表示させる*/
}
/*上にかぶさる帯の設定*/
.trans4::before{
width:100%;
height:100%;
position: absolute;
display: block;
content: '';
background-color:#F00;
transform: translateX(-100%); /*X軸で左側に隠しておく*/
transition: all .8s ease 0s; /*帯のアニメーション*/
}
.trans4.active::before{
transform: translateX(100%); /*左に隠れている帯を右端まで伸ばして、右端を越えて消えるように設定*/
}
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ