CSSアニメーションの得体が知れない

CSSアニメーションのイメージ

CSSアニメーションってなんかいろいろ難しそうなの組み合わせてて何してるのかよくわからないから避けてた。@keyframes、transition、transformをごにょごにょ使ってなんかやばい感じのやつ(?)っていうイメージ

イメージ

@keyframes/animation:なんか動き方を決める?
transition:なんか動きのスピードを変える?
transform:transitionの書き間違えみたいなあれ

実際

@keyframes/animation:動きの指定も時間の指定もできる、開始→終了までを%で指定してここ(%)のときはこの動き!みたいな指定の仕方ができる
 @keyframesで開始→終了の動きを指定して、animationで時間などを指定
transition:(変化するまでの)時間を設定。動き方そのものは決めてない?
transform:移動、回転、伸縮、傾斜の変形

animationがなんかtransitionの上位互換感ある……ちょっとわかったけど、なんか役割被ってね?というか似てね?というか結局どれをどう使うんだ?という謎が出てきた(何が分からないのか分からない状態を脱した喜び)比較したらわかるかもってことで、細かいプロパティはガン無視して適当に比較してみる

html↓

<div></div>

transition

めっちゃ単純なホバーすると伸びるやつにtransition使ったやつ

終わりと始まりが別で設定されてて、そこにtransition追加してるんだなぁ

div{
  width:100px;
  height:100px;
  background:pink;
  transition:1s;

}
div:hover{
  width:300px;
  transition:1s;
}

transform

transitionの親戚みたいな顔してるけど似て非なるこいつ
めっちゃ単純なホバーすると30px右下に動くやつ↓
これhoverの値をカーソルない位置指定してるとすごい箱がガタガタしてて挙動不審

div{
  width:100px;
  height:100px;
  background:pink;
}
div:hover{
  transform:translate(30px,30px)
}

これにtransitionを加えるとなめらかに動く↓

div{
  width:100px;
  height:100px;
  background:pink;
  transition:1s;
}
div:hover{
  transform:translate(30px,30px)
  transition:1s;
}

@keyframes/animation

@keyframesで定義して、animationで呼び出してる感じ。@keyframes、functionみたい

↓1回だけ100px→300pxにwidthが伸びる単純なやつ。animationはトリガーがいらないらしくhover指定せずとも勝手にアニメーションが始まるようにできる

div {
  height:100px;
  background:pink;
  width:300px;
  animation: div 1s;
}

@keyframes 
  div {
    from {
      width:100px;
    }
  }

↓100px⇔300pxと背景色変わるのを繰り返すやつ

div {
  animation: div 1s infinite;
  height:100px;
}
@keyframes div {
  from {
    width:100px;
    background:skyblue
}
  to {
    width:300px;
    background:pink
  }
}

まだそれぞれのことはよく分かってないけど得体の知れなさは解消した!

コメント

タイトルとURLをコピーしました