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

こばゆた

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

こばゆた

こんな魔球も作れます

チャッピー

これは打てないね

今回の内容

1.animation-duration
2.animation-delay
3.animation-timing-function
4.まとめ

1.animation-duration

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

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

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

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

/*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( )	変化速度を自分で指定する