IT初心者の分かったメモ

3.1. HTML（基本構造）

ここでは、アニメーションをつける対象となる「ボタン部分」のHTMLを用意します。複雑なコードは不要で、シンプルなボタンタグだけで準備できます。

<button class="transition_sample">ボタン</button>

3.2. CSS（アニメーションの書き方）

次に、さきほど用意したボタンに CSS を当てていきます。transitionのポイントは「どのプロパティをどれくらいの時間で変化させるか」です。今回は、ホバー時にボタンが1.1倍かつ0.3秒で拡大するようtransformとtransitionを設定します。

.transition_sample{
 display: inline-block;
 padding: 10px 20px;
 background: #3498db;
 color: #fff;
 border-radius: 4px;
 transition: transform 0.3s;    
}

.transition_sample:hover {
 transform: scale(1.1);
}

3.3. transitionなしとの比較

最後に、transitionを設定しなかった場合の動き比較します。実際にホバーしてみて違いを確かめてみてください。

4.1. HTML（基本構造）

アニメーションを付けたい対象となる箱（ボックス）を用意します。

<div class="animation_sample"></div>

4.2. CSS（アニメーションの書き方）

ここでは、animationプロパティと@keyframes を使って「連続した動作」を作ります。

.animation_sample{
 margin: 0 auto;
 width: 32px;
 height: 32px;
 border: 4px solid #ccc;
 border-top-color: #3498db;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

animationのプロパティ値は「アニメーションの名前を定義し → 何秒の間に → どのような速度で → 何回繰り返すのか」という順で設定していきます。@keyframesはanimationで定義したアニメーションの名前に具体的にどのような動きをするのかを設定します。今回は白い円状の枠に、上部分だけ色の付いたリングを1秒間の間に360度回転させるという動きにしています。

4.3. @keyframesの発展

@keyframesの記述は必ずしも0% → 50% → 100%の必要はなくさらに細かく設定することでより細かいな動きを実装することができます

@keyframes spin {
 0% {
  transform: rotate(0deg);
 }
 30% {
  transform: rotate(200deg); /* 序盤で一気に回る */
 }
 60% {
  transform: rotate(260deg); /* 減速していく */
 }
 100% {
  transform: rotate(360deg);
 }
}