この記事では、アニメーション効果を実現し、アニメーションを通じて CSS を素早く学ぶ方法について詳しく分析します。皆さんのお役に立てれば幸いです。
ビジネスでフロントエンドに対する要求がますます高まるにつれ、フロントエンドの 3 つの魔法の武器の 1 つである CSS はますます複雑になっています。初心者の生徒にはある程度のプレッシャーがかかります。 CSS は、特定の属性に至るまでそれほど複雑ではありませんが、主な問題は、多くの知識ポイントがあることです。ようやく主要な知識ポイントを学んだ後、インターネットで質問を見たり、達人が書いた CSS の本を読んだりして、私は新たな海に溺れました。
実際、人間の脳は散在する知識点を記憶するのが苦手ですが、これらの知識点を論理的に結びつけることができる線があれば、脳の記憶と検索が大幅に容易になります。手がかりは論理的で、できれば興味深いものである必要があります。
たまたまですが、CSS アニメーションは非常に興味深い手がかりであり、アニメーションの変化から CSS のプロパティを理解することができます。
たとえば、CSS が角丸四角形の border-radius 属性を追加することはわかっていますが、さまざまなサイズの角丸を設定するとどのような影響があるでしょうか?サイズを何度も変更して実験する代わりに、アニメーションを作成して一目でわかるようにすることもできます:
トランジション アニメーション
最初に、トランジションと呼ばれる単純な CSS プロパティ アニメーションを学習します。 上記4つのプロパティで構成されます。
#hellocss { transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s; }
Hello,HTML
Hello,CSS
Hello,HTML
Hello,CSS
熟練したら、4 つの属性を 1 つに短縮することもできます:
transition: width 5s linear 1s;
遅延がない場合、4 番目の項目は必要ありません。書かれること。 最初にゆっくり、次に速くという簡単な方法が採用される場合、項目 3 も省略できます。 最初の項目が変更される可能性がある場合は、すべてと記述することができます。 ただし、2 番目のアニメーション期間は必ず記述する必要があり、記述しない場合はデフォルトで 0 秒となり、何も表示されません。
線形に計算できるプロパティはすべてアニメーションに使用できます。幅、高さ、位置などのわかりやすい座標属性に加え、アニメーションの良いシーンでは色属性もよく使われます。 青の背景に黄色のテキストから白の背景に黒のテキストまでのアニメーション プロセスを見てみましょう:
Hello,HTMLHello,CSS
keyframes アニメーション上記の遷移は比較的単純です。たとえば、何回ループする必要があるか、何回元に戻す必要があるか、または何回繰り返す必要があるかなどです。途中で変更する必要がある場合など、さらに多くの属性を指定する必要があります。これらのニーズはキーフレーム アニメーションによって満たされます。
キーフレーム アニメーションの利点は、開始点と終了点がキーフレームで指定されることです。それを変更するイベントを記述する必要はありません。すべて CSS で行われます:
@keyframes color_change{ from { background-color: blue; color: yellow; } to { background-color: white; color: black; } }
然后我们在一个css选择器里面去引用定义好的keyframes动画，同时指定动画时长、变化曲线和延时：
#hellocss { animation-name: color_change; animation-duration: 10s; animation-timing-function: linear; animation-delay: 1s; }
到了keyframes动画，我们终于可以指定播放多少次了，比如连播三次：
#hellocss { animation-name: color_change; animation-duration: 10s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 3; }
甚至可以无限性地播放下去:
animation-iteration-count: infinite;
光循环播还不过瘾，我们还想先正着变，然后再变回来，我们可以将方向设为交替播放：
animation-direction: alternate;
把上面的综合在一起，大家跑起来看看：
Hello,HTMLHello,CSS
而其实呢，from和to，分别是0%和100%的别名，也可以这么写：
@keyframes color_change { 0% { background-color: blue; color: yellow; } 100% { background-color: white; color: black; } }
这样我们可以增加百分比，让变化变得更有趣一些:
@keyframes color_change { 0% { background-color: blue; color: yellow; } 50% { background-color: yellowgreen; color: red; } 100% { background-color: white; color: black; } }
最后，如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现，比如我们让点击第一个div来实现暂停功能：
Hello,HTMLHello,CSS
我们现在终于可以看看开篇时的第一个动画是如何写成的了：
@keyframes color_change { 0% { background-color: blue; color: yellow; border-radius: 0px; } 50% { background-color: yellowgreen; color: red; } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; } }
平面移动：transform:translate属性
最简单的平移方式就是使用transform:translate属性。比如我们开篇的第二个动画：
我们先让变色的圆角矩形向下移100px，然后再右移100px:
0% { background-color: blue; color: yellow; border-radius: 0px; transform:translate(0px,0px) } 50% { background-color: yellowgreen; color: red; transform:translate(0px,100px) } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; transform:translate(100px,100px) } }
旋转：transform:rotate属性
最后我们看旋转属性。
@keyframes color_change{ 0% { background-color: blue; color: yellow; border-radius: 0px; transform:translate(0px,0px); transform:rotate(0deg); } 50% { background-color: yellowgreen; color: red; transform:translate(0px,100px); transform:rotate(90deg); } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; transform:translate(100px,100px); transform:rotate(180deg); } }
让我们回归基础，通过动画来了解盒子模型。
所谓盒子，最基础的就是宽和高。 这没啥可说的，来个宽高动画先体验一下：
Hello Box
除了宽高之外，盒子有边框，边框内部有padding，边框外面还有margin。
包括边框在内，都分为top, bottom, left, right四个方向：
border-width: 5px; border-top-color: #f5222d; border-bottom-color: #cf1322; border-left-color: #a8071a; border-right-color: #820014; padding: 10px; margin: 15px;
我们现在给边框加上颜色和形状，带着margin和padding动起来看看效果：
代码如下：
Hello Box
打开chrome的开发者工具，我们可以更清楚地看清content, padding, border, margin, 之间的关系：
Border取5px只是为了让其更容易被识别，但是太丑了，我们将其改为2px。效果就好得多了：
（学习视频分享：css视频教程）
以上がCSSをアニメーションでサクッと学べる記事！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
