CSSでプロパティを自由自在にアニメーションさせる方法/animation-name、duration、@keyframesの使い方

@keyframesは、アニメーションする要素の最初と最後だけでなく「途中経過」を指定することで、自分のイメージした通りの動きをさせることができる技術です。

@keyframesの使い方

こんな感じのものを成果物として作りたいと思います（マウスカーソルを乗せるか、スマホなら長押ししてみてください）。

四角形が色と形を変更し、手順を一巡すると元に戻ります。この動きは、keyframesで動きの途中経過を指定することで実装しています。
keyframesの実相は二段階の手順を踏みます。まずはCSSで動きの「名前」を定義します。一般的なプログラムでいう関数名です。
上の箱ではdivにboxというクラスを付けて、boxクラスのCSSでanimation-nameをmoveと定義しています。

アニメーションに名前をつける
animation-name:名前;

それから、一連のアニメーションにかかる時間を秒単位で指定します。

アニメーションにかかる時間を指定する
animation-name:名前;

あとはデフォルトの状態を指定すると、上の箱で言えばこんな感じになります。

<！-- html -->
<div class = "box"></div>

/*CSS*/
.box{
border:1px solid black;
background-color:white;
width:125px;
height:25px;
animation-name:move;
animation-duration:1s;
}

ただしこの状態だとページを読み込んだ時点でアニメーションが実行されるので、animation-nameとanimation-durationはhoverに指定して、マウスカーソルを乗せた時に実行されるようにしておきます。

.box:hover{
animation-name:move;
animation-duration:1s;
}

次に名前をつけたアニメーションの内容を書いていきます。

時系列ごとのプロパティを指定
@keyframes アニメーション名{0～100%{プロパティ}0～100%{プロパティ}..}

なんのこっちゃ、という感じでしょうが、つまりdurationで1s=1秒を指定した、この0% = 0秒です。10%の状態を指定すれば、0.1秒時点でその状態に変化します。最終的に1秒で100%になり、それからデフォルトの状態に戻ります。
durationで5sを指定していれば、40%で2秒経過時点、80%で4秒経過時点のプロパティを指定できます。それぞれのプロパティで色や大きさを変更していると、結果的にアニメーションが実行されることになります。

.box:hover{
animation-name:move;
animation-duration:1s;
}

@keyframes move{
25%{
background-color:red;
width:100px;
height:50px;
}
50%{
background-color:purple;
width:75px;
height:75px;
}
100%{
background-color:orange;
width:50px;
height:100px;
}
}

なお、0%はfrom、100%はtoと表記することも可能です。
@keyframesはCSSの中でクラスやタグとは別に記述するので、使いまわすことが可能です。