Keyframesを使った基本的なアニメーションの作り方
はじめに
今回は、私がコーディングを学んできて「こういうのがやってみたかった！」と思えた"Keyframes"を使って要素に動きを付ける基本的な手法を学びます。
準備
まずはじめに、ブラウザ上で動作するシンプルなHTMLファイルを作成します。
今回は以下のコードを使用します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes Animation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: slidebox;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
@keyframes slidebox {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200%);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
このコードでは、赤い正方形が左から右へ200px移動するアニメーションを定義しています。
基本的なKeyframesの使い方
上記のコードで使われている@keyframesはKeyframesを定義するためのCSSルールです。moveという名前のKeyframesを定義しています。transformプロパティを使って、要素の位置を変化させています。
0%と100%はアニメーションの開始と終了時のステータスを示しており、50%はdurationで指定した秒数の、半分経過時点でのステータスを示しています。ここではtranslateX()を使って要素を水平方向に移動させています。
イージングの追加
アニメーションにイージングを追加することで、動きがより自然になります。例えば、ease-in-outというイージングを使用することで、アニメーションがゆっくり始まり、ゆっくり終わるようになります。
animation-timing-function: ease-in-out;
このように指定することで、アニメーションのスピードにも指示が出せます。
まとめ
Keyframesを使った基本的なアニメーションの作り方を学びました。自分のコーディングで要素を動かすことが出来るとワクワクしますよね！
慣れてしまうと意外と簡単にできてしまうので、ぜひ今回用意したboxにいろんな動作を行わせてみてください
下記URLは私が参考にさせていただいた記事です！
より詳しく種類が記述されているので、興味がわいた方はぜひご活用いただければと思います。