#2 CSSでアニメーション

jQueryとCSS3でアニメーションを実装する

アニメーションとは、開始の状態と終了の状態(デザイン)を作っておき、開始の状態から「何秒かけ、どういった動きで」という 設定を行い、終了の状態に導くことを指します。

cssで四角を2Dや3Dに変形させ図形を作る

通常htmlの要素は正方形を含む長方形となりますが、cssの transformトランスフォーム プロパティを使い「変形」させることができます。
プロパティ:transform(トランスフォーム)
値:translate(移動)
  rotate(回転)
  scale(伸縮)
  skew(傾斜)

類似のプロパティ
transform-origin:要素の起点を設定
transform-style:指定した要素の小要素が2Dか3Dかを設定
perspective:3D要素要素の遠近感を指定
perspective-origin:3D要素要素の見え方を設定
matrix、matrix3d:まとめて設定できる

例)

.translate-selector{
  transform: translate(10px,30px)
}
.rotate-selector{
  transform:rotate(-45deg);
}
.scale-selector{
  transform:scale(1.8,1.2);
}
.skew-selector{
  transform:skewX(15deg) skewY(10deg);
}

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

▼translate
translate(10px,30px)
translate(-30px,-10px)
translate(30%)
translate(10px)
▼rotate
rotate(45deg)
rotate(-45deg)
rotateX(180deg)
rotateY(180deg)
▼scale
scale(1.8,1.2)
scaleX(1.4)
scaleY(1.2)
scale3d(1,1.3,1.6)
rotateY(45deg)
▼skew
skewX(-20deg)
skewY(20deg)
skew(15deg,10deg)
skewX(15deg) skewY(10deg)
skewX(15deg) skewY(-15deg)

transformトランスフォーム は設定がやや難しく頭で計算してイメージするのが大変です。 便利なジェネレーターを使って確認してみましょう。 translate Generator

cssで作った図形を動かす

図形を変形することを覚えたので、アニメーションさせてみましょう。
アニメーションで使うプロパティのひとつ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;
transition: 適応させる要素 変化する時間 イージング系 開始遅延時間;

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

グレーの部分をマウスオーバーしてみましょう。
セレクタ=> 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で指示した動きは以下の図のようになります。 経過時間を長くすることでアニメーションの動きを確認することができます。
powerd by