CSSでanimation-durationを指定してアニメーション時間を指定する方法

CSS

2019.05.25

CSSでanimation-durationを指定してアニメーション時間を指定する方法

「CSSで@keyframesでアニメーションしてみる」で、liタグをアニメーションしてみましたが、複数のliタグに対して異なる時間を指定して、アニメーションに違いを作ってみます。

htmlは3つのliタグを持つだけです。

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="sample27.css">
<title>サンプル</title>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

それぞれのliタグにanimation-durationを指定します。

animation-duration: 3s;

これは3秒のアニメーションになります。

body {
  background: #00CCFF;
}

@-webkit-keyframes square {
  0% { transform: translateY(0); }
  100% { transform: translateY(700px);}
}
@keyframes square {
  0% { transform: translateY(0); }
  100% { transform: translateY(700px);}
}
li{
  position: absolute;
  list-style: none;
  -webkit-animation: square 10s infinite;
  animation: square 10s infinite;
}
li:nth-child(1){
  left: 30%;
  width: 80px;
  height: 80px;
  background:black;
  animation-duration: 3s; // 3秒
}
li:nth-child(2){ // 未指定なので10秒
  left: 50%;
  width: 80px;
  height: 80px;
  background:black;
}
li:nth-child(3){
  left: 70%;
  width: 80px;
  height: 80px;
  background:gray;
  animation-duration: 6s; // 6秒
}

デモ