【CSS】animationでよく使うプロパティ

こばゆた
こばゆた

今回の内容はtransitionプロパティの時と似たようなことをやりますので一回やったことがあればすんなり理解できるのではないかと思います

野球ボールの画像

こばゆた
こばゆた

こんな魔球も作れます

チャッピー
チャッピー

これは打てないね

スポンサーリンク

1.animation-duration

animation-durationプロパティはアニメーションが開始してから終了するまでにかかる時間を指定します。

時間+”s”で指定します。

セレクター{
  animation-duration: 〇〇s;
}

ボールにカーソルを乗せてください

野球ボールの画像

1s
野球ボールの画像

2s
野球ボールの画像

3s

/*keyframesの設定*/
@keyframes duration{
  0%{
    transform: none;
  }
  70%{
    transform: translateX(50px) rotate(-720deg) 
  }
  100%{
    transform: translateX(100px)  rotate(-1080deg) ;
  }
}

/*アニメーションの設定*/
.ballA:hover,.ballB:hover,.ballC:hover{
  animation-name: duration; /*keyframesの名前が"duration"*/
}

.ballA:hover{
  animation-duration: 1s; /*1秒間かけてアニメーションする*/
}

.ballB:hover{
  animation-duration: 2s; /*2秒間かけてアニメーションする*/
}

.ballC:hover{  
  animation-duration: 3s; /*3秒間かけてアニメーションする*/
}
きなこ
きなこ

本当にtransition-durationとあまり変わらないね

こばゆた
こばゆた

そうだね

この後出てくるanimation-delayとanimation-timing-functionも名前は違えど効果はtransitionプロパティとさほど変わらないよ

スポンサーリンク

2.animation-delay

アニメーションにディレイ(遅れ)をつける事ができます。

言い換えると指定した秒数後にアニメーションが始まるという事です。こちらも単位は”s”で秒数を指定します。

セレクター{
  animation-delay: 〇〇s;
}

ボールにカーソルを乗せてください

野球ボールの画像

1s後
野球ボールの画像

2s後
野球ボールの画像

3s後

/*keyframesの設定*/
@keyframes delay{
  0%{
    transform: none;
  }
  70%{
    transform: translateX(50px) rotate(-720deg) 
  }
  100%{
    transform: translateX(100px)  rotate(-1080deg) ;
  }
}

/*アニメーションの設定*/
.ballA:hover,.ballB:hover,.ballC:hover{
  animation-name: delay; /*keyframesの名前が"delay"*/
  animation-duration: 1s; /*1秒間かけてアニメーションする*/
}

.ballA:hover{
  animation-delay: 1s; /*1秒後にアニメーションを開始する*/
} 

.ballB:hover{
  animation-delay: 2s; /*2秒後にアニメーションを開始する*/
}

.ballC:hover{
  animation-delay: 3s; /*3秒後にアニメーションを開始する*/
}

3.animation-timing-function

アニメーションに速さや緩急を与える時に使います。

セレクター{
  animation-timing-function: 値;
}

transition-timing-functionの使い回しですが下の図で見てもらうとなんとなく違いがわかると思います。

ボタンにカーソルを乗せてください

ease
ease-in
ease-out
ease-in-out
linear
乗せる


ボールにカーソルを乗せてください

野球ボールの画像

ease
野球ボールの画像

ease-in
野球ボールの画像

linear
/*keyframesの設定*/
@keyframes atf{
  0%{
    transform: none;
  }
  70%{
    transform: translateX(50px) rotate(-720deg) 
  }
  100%{
    transform: translateX(100px)  rotate(-1080deg) ;
  }
}

/*アニメーションの設定*/
.ballA:hover,.ballB:hover,.ballC:hover{
  animation-name: atf; /*keyframesの名前が"atf"*/
  animation-duration: 1s; /*1秒間かけてアニメーションする*/ 
}

.ballA:hover{
  animation-timing-function: ease;  /*アニメーションが"ease"で動く*/
} 

.ballB:hover{
  animation-timing-function: ease-in;  /*アニメーションが"ease-in"で動く*/
}

.ballC:hover{
  animation-timing-function: linear;  /*アニメーションが"linear"で動く*/
}

“steps”や”cubic-bezier”もつかえます。

ボールにカーソルを乗せてください

野球ボールの画像

/*keyframesの設定*/
@keyframes ballSteps{
  0%{
    transform: none;
  }
  100%{
    transform: translateX(200px);
  }
}

/*アニメーションの設定*/
.ball:hover{
  animation-name: ballSteps; /*keyframesの名前が"ballSteps"*/
  animation-duration: 2s; /*2秒間かけてアニメーションする*/
  animation-timing-function: steps(8); /*アニメーションが"steps"で動く*/
}

ボールにカーソルを乗せてください

野球ボールの画像

/*keyframesの設定*/
@keyframes ballBezier{
  0%{
    transform: none;
  }
  100%{
    transform: translateX(200px);
  }
}

/*アニメーションの設定*/
.ball:hover{
  animation-name: ballBezier; /*keyframesの名前が"ballBezier"*/
  animation-duration: 2s; /*2秒間かけてアニメーションする*/
  animation-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05); /*アニメーションが"cubic-bezier"で動く*/
}

4.まとめ

animation-duration まとめ
  • アニメーションが開始してから終了するまでにかかる時間を指定する
セレクター{
  animation-duration: 〇〇s;
}
animation-delay まとめ
  • アニメーションにディレイをつける事ができ、指定した秒数後にアニメーションが始められる
セレクター{
  animation-delay: 〇〇s;
}
animation-timing-function まとめ
  • アニメーションに速さや緩急を与える
セレクター{
  animation-timing-function: 値;
}
キーワード 効果
ease 開始と終了が緩やかに動く(初期値)
ease-in 開始が緩やかに、終了が早く動く
ease-out 開始が早く、終了が緩やかに動く
ease-in-out “ease”よりも更に開始と終了が緩やかに動く
linear 一定の速度で動く
steps(n, start(end)) nで指定した数だけ段階的に変化
cubic-bezier( ) 変化速度を自分で指定する

コメント