CSSで@keyframesでアニメーションしてみる

CSS

2019.05.22

CSSで@keyframesでアニメーションしてみる

@keyframesっていうのを使うとアニメーションができてデザイナブルなページが作成できたりします。

ここを参考にしました。

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{
  list-style: none;
}
li:nth-child(1){
  left: 30%;
  width: 80px;
  height: 80px;
  background:black;
}

.aaa {
  -webkit-animation: square 25s infinite;
  animation:         square 25s infinite;
}

squareを指定するとその意味の通り平方（四角）に動かすことができます。

上記のように0%と100%のみ指定した場合は上から下、下から上、左から右、右から左みたいに動かすことができます。

translateYにしているので上下のアニメーションになります。

htmlのbody部は以下のような感じです。

<body>
  <ul class="aaa">
    <li></li>
  </ul>
</body>

これでliタグが上から下に10秒かけて移動します。

デモ

infiniteは無限

infiniteを指定すると無限にアニメーションします。英語通りです。

translateX

translateXにしてみると今度は左右でアニメーションします。

上記のCSSのtranslateYをtranslateXに変えただけです。

body {
  background: #00CCFF;
}

@-webkit-keyframes square {
  0% { transform: translateX(0); }
  100% { transform: translateX(700px);}
}
@keyframes square {
  0% { transform: translateX(0); }
  100% { transform: translateX(700px);}
}
li{
  list-style: none;
}
li:nth-child(1){
  left: 30%;
  width: 80px;
  height: 80px;
  background:black;
}
.aaa {
  -webkit-animation: square 10s infinite;
  animation: square 10s infinite;
}

デモ