CSSでアニメーションを作るのは、思ったより、難しくはありません。
下記のコードは青色の丸を３秒間の間に大きさを色を変化されるアニメーションになります。animationのプロパティに任意の名前をつけて（下記ではAnimation)アニメーションを何秒にするか（下記では３秒）タイミング（下記ではease 変化が緩やかにスタートしてから急速に進行し、最後にまたゆっくりと停止するような効果）infinite(繰り返す)を指定しています。@keyframesで指定の時間の間にどのような変化をするか％で区切っています。下記は１.５秒のところで大きさが120%,色が青から赤に変化するように指定しています。3秒後には元の形に戻っています。複雑なアニメーションは他の言語で表現しますが、CSSでも色々できます。
CSS
.element {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
animation: Animation 3s ease infinite;
}
/* アニメーションのキーフレームを定義 */
@keyframes Animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
background-color: red; }
100% {
transform: scale(1); }
}
