ps：まずは余談から始めましょう。仕事の関係でブログを更新していなかったので、最近は一区切りつけて、いくつかのことを整理した後、ゆっくりと座って、自分のブログを再整理しようと思います。
今日は CSS3 の新しいプロパティである「animation」について話します。これは一種のレビューですが、普段どのように使用しているか、いくつかのテクニックを共有します。より基本的な内容を学びたい場合は、リンクをクリックしてください：https://www.runoob.com/css3/css3-animations.html、オンライン上には似たようなチュートリアルがたくさんあります。
この記事では、アニメーションの基本的なプロパティについて詳しく説明するのではなく、CSS3 のアニメーションプロパティをよりスムーズに見せる方法について少し拡張します。
もちろん、説明する前に、animation の基本的なプロパティを簡単に紹介します。
animation プロパティ#
animation プロパティには次の値があります：
- @keyframes | アニメーション自体（最も重要なもの）
- animation-name | アニメーションの名前
- animation-duration | アニメーションの実行時間
- animation-fill-mode | プロパティが「forwards」の場合、アニメーションは最後のフレームで停止します
アニメーションは、ウェブサイトの特殊効果やレスポンシブレイアウトなどに使用することができます。
基本的なアニメーションの作り方#
アニメーションは、ある状態から別の状態への過程です。たとえば、左から右への移動過程です。
まず、各プロパティの具体的な役割を理解する必要があります。例として、白から黒への移動を取り上げましょう。まず、@keyframesを使用してアニメーションの過程を記述します。
@keyframes leftright {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
このコードは、leftrightという名前のアニメーションで、コンテナを左から右に 100px 移動させることを意味します。
次に、このアニメーションをさらに補完します。
<!DOCTYPE html>
<html>
<head>
<title>アニメーション</title>
<style>
.demo {
width: 100px;
height: 100px;
background: #000;
animation-name: leftright;
animation-duration: 1s;
}
@keyframes leftright {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
ブラウザでこのページを実行してみると、左右に 100px 移動する黒い四角形が表示されます。合計 1 秒で完了します。
しかし、このアニメーションは突然終わってしまい、コンテナが元の位置に戻ってしまいます。なぜでしょうか？それは、最後のフレームを保持していないためです。先ほど説明しましたね。
.demo {
width: 100px;
height: 100px;
background: #fff;
animation-name: leftright; /* アニメーションの名前をタグにバインドする */
animation-duration: 1s; /* アニメーションの実行時間を設定する */
animation-fill-mode: forwards; /* アニメーションは最後のフレームで停止する */
}
再度実行すると、アニメーションが最後に停止します。
アニメーションに慣性を持たせる#
このアニメーションを注意深く観察すると、全体の過程がスムーズではなく、硬直していることに気付きます。左から右への移動は円滑ではありません。
分析してみると、日常生活の習慣的なアニメーションが欠けていることがわかります。それは慣性ですが、このプロパティは直接設定することはできず、アニメーション自体のプロパティを調整することでのみ実現できます。以下は、このコードの一部です。
@keyframes leftright {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
0%は開始を表し、100%は終了を表します。これらは時間の節目を指し、その時間点でアニメーションが指定された位置に移動することを意味します。
したがって、新しい時間の節目である50%を追加することができます。半分の時間が経過すると、四角形が 120px の位置に移動し、その後元の位置に戻ります。
以下は完全なコードです。ローカルにコピーして実行してみてください。
<!DOCTYPE html>
<html>
<head>
<title>アニメーション</title>
<style>
.demo {
width: 100px;
height: 100px;
background: #000;
animation-name: leftright;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes leftright {
0% {
transform: translateX(0);
}
50% {
transform: translateX(120px);
}
100% {
transform: translateX(100px);
}
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
修正後、ブラウザで効果を確認してください。
スムーズになりましたか？慣性の感覚があり、これは仕事でアニメーションの要件に遭遇した場合に非常に重要です。ユーザーの体験をより強くする方法は、技術の一部です。
これらはすべて基本的なことですが、体験が向上したと感じると、ウェブサイトの再訪率が高くなるでしょう。例えば、あるショッピングサイトで買い物をするとします。ページ全体が快適に見え、エフェクトの細部がスムーズであれば、購買意欲が高まるのではないでしょうか。浅はかな言い方かもしれませんが、心理的な効果があるのです。
アニメーションの効果をうまく活用するには、それなりの技術が必要です。CSS を使いこなすことはそんなに簡単ではありません。