アニメーションのプロパティ

CSSでふわっとフェードインさせる方法！@keyframesアニメーション入門 l NatsukiMemo なつ記メモ of WEBデザインTIPS

まとめてアニメーションプロパティを指定できます。

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

@keyframes animation-sample{
	0%{
		width: 0;
	}
	100%{
		width: 100%
	}
}
.animation-box{
	animation: fadeIn 3s ease-in-out 5s infinite reverse forwards running;
}

「animation-duration」と「animation-delay」は共に秒数を指定するので、先に書いたものが「animation-duration」、後に書いたものが「animation-delay」として処理されますので覚えておきましょう。

https://webdesignday.jp/inspiration/technique/css/5167/#animation-3