作成日:2021/04/12 更新日:2021/12/21

#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
rotateローテート 回転

.rotate1{ transform: rotate(45deg); }
.rotate2{ transform: rotate(-45deg); }
.rotate3{ transform: rotateX(180deg); }
.rotate4{ transform: rotateY(-180deg); }
rotate1
rotate2
rotate3
rotate4
scaleスケール 大きさの伸縮

.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
skewスキュー 傾斜

.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		トランジションを開始するまで遅延させる時間
transitionプロパティは上記のプロパティを一括設定(ショートハンド)するプロパティです。

要素を動かすにはまず「開始の状態」と「終了の状態」を作成しておき、クリックやマウスオーバー、画面に出てきたとき、などのタイミングで 「開始の状態」から「終了の状態」にアニメーションさせながら遷移させます。

例えば300pxから200pxに縮小するアニメーションをつくるとき。開始と終了をまず決める。

/*開始の状態*/
.selector{width:300px;}

/*終了の状態*/
.selector{width:200px;}
マウスオーバーでアニメーションさせるときは、開始の状態に

/*開始の状態*/
.selector{
  width:300px;
  transition: all .8s ease 0s; /* ←開始にtransitionを追記*/
}
/*終了の状態*/
.selector:hover{
  width:200px;
}
とtransitionを追記します。

transition:	transition-property	transition-duration	transition-timing-function	transition-delay;
		適応させる要素		変化する時間		イージング系			開始遅延時間;

実際の動きは以下のようになります。

グレーの部分をマウスオーバーしてみましょう。
セレクタ=> trans1

transitionなしの場合
セレクタ=> trans2

transition: all .8s ease 0s;
▼解説

/* 開始時の状態 */
.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').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').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%);   /*左に隠れている帯を右端まで伸ばして、右端を越えて消えるように設定*/
}
translateXで指示した動きは以下の図のようになります。 経過時間を長くすることでアニメーションの動きを確認することができます。