這篇文章帶大家深入解析如何實現動畫效果，透過動畫來快速學習 css ，希望對大家有幫助！
隨著業務對前端的需求越來越多，身為前端三大法寶之一的css也越變越複雜。給初學的同學們帶來了一定的壓力。 css具體到每一個屬性也都沒有多複雜，主要問題在於知識點比較多。好不容易把主要知識點學完了，一看網路上的題，或是一看大師們寫的css的書，又被淹沒到新的海洋中。
其實人類的大腦不善於記憶零散的知識點，但是如果有一條邏輯線能夠將這些知識串聯起來，就能大大方便大腦的記憶和搜尋。這個線索要有邏輯，最好還是有趣。
剛好，css的動畫就是這樣一個有趣的線索，可以在動畫的變化中理解css屬性。
例如我們知道css增加了圓角矩形的border-radius屬性，那麼設定不同大小的圓角，是什麼樣的效果呢？與其一次次地改大小去試驗，不如我們做成一個動畫讓其一目了然：
我們還可以讓其移動位置中變形：
甚至我們還能讓其轉圈：
#CSS動畫快速掃盲
在串起其它屬性之前，我們先理解下動畫。
動畫的核心關鍵字在於「動」。 我們要回答幾個問題:
- What: 什麼東西動？
- Where: 往哪裡動？
- When: 什麼時候動？動多久？
- How: 怎麼動？
- How much: 動幾次？
這些問題的結果，就構成了一個動畫的構成要素。
首先是動的主體是什麼？就是我們的HTML標籤，或是標籤構成的複雜元件之類的。對我們來說，主要就是
transition動畫
我們先學習一個簡單的css屬性動畫，叫做transition。 它就是由上面的4個屬性組成的：
- transition-property: 指定要變的css屬性值
- transition-duration: 動畫長度
- transition -timing-function: 動畫的快慢變化
- transition-delay: 動畫起始的延遲時間
我們來看個例子：
#hellocss {
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 1s;
}這個動畫指定的意思是說，如果寬度width變化了，則延遲一秒鐘運行5秒寬度變化的動畫。變化速度是等速率的。
為了看得清楚，我們設一個初始的width，再加上一個背景色和前景色：
<style>
#hellocss {
background-color: blue;
color: yellow;
width: 20px;
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 1s;
}
</style>既然是動畫，那麼要有變化。 於是我們寫兩句javascript：
<script>
function trans1(){
let hcss1 = document.getElementById("hellocss");
hcss1.style.width = "100px";
}
</script>然後找個事件來觸發這個變化，例如我們在頁面載入時來做：
Hello,HTML
Hello,CSS
<script>
function trans1(){
let hcss1 = document.getElementById("hellocss");
hcss1.style.width = "100px";
}
</script>
完整的程式碼如下：
<style>
#hellocss {
background-color: blue;
color: yellow;
width: 20px;
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 1s;
}
</style>
Hello,HTML
Hello,CSS
<script>
function trans1(){
let hcss1 = document.getElementById("hellocss");
hcss1.style.width = "100px";
}
</script>
熟練了之後，我們也可以將４個屬性簡寫成一個：
transition: width 5s linear 1s;
如果沒有延時，第4項可以不寫。 如果採用先慢後快的ease方式，第3項也可以省略。 如果第一項是什麼變都動，可以寫成all。 但是第二項動畫時長不能不寫，不寫預設是0秒，就啥也沒有了。
所有的可以線性計算的屬性都可以用來進行動畫。除了寬、高、位置等容易理解的座標屬性，顏色屬性也是常被用來做動畫的好場景。 我們來看一個從藍底黃字到白底黑字的動畫過程：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#hellocss {
background-color: blue;
color: yellow;
transition: all 10s linear 1s;
}
</style>
</head>
<body onload="trans1()">
<div>Hello,HTML</div>
<div id="hellocss">Hello,CSS</div>
<script>
function trans1(){
let hcss1 = document.getElementById("hellocss");
hcss1.style.backgroundColor = "white";
hcss1.style.color="red";
}
</script>
</body>
</html>##keyframes動畫
上面的transition比較簡單，針對於例如要循環多少次，或者變過去還要再變回來，或者中間要變幾次等，我們就需要指定更多的屬性。這些需求就由keyframes動畫來滿足。 keyframes動畫的好處就是起點和終點都在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;
把上面的综合在一起，大家跑起来看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
@keyframes color_change {
from {
background-color: blue;
color: yellow;
}
to {
background-color: white;
color: black;
}
}
#hellocss {
animation-name: color_change;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div>Hello,HTML</div>
<div id="hellocss">Hello,CSS</div>
</body>
</html>而其实呢，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来实现暂停功能：
<body>
<div onclick="trans1()">Hello,HTML</div>
<div id="hellocss">Hello,CSS</div>
<script>
function trans1() {
let hcss1 = document.getElementById("hellocss");
hcss1.style.animationPlayState = "paused";
}
</script>
</body>通过动画形象理解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);
}
}通过动画学习盒子模型
让我们回归基础，通过动画来了解盒子模型。
所谓盒子，最基础的就是宽和高。 这没啥可说的，来个宽高动画先体验一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
@keyframes box_change {
0% {
height: 50px;
width: 50px;
}
50% {
height: 200px;
width: 50px;
}
100% {
height: 200px;
width: 200px;
}
}
.box1 {
background-color: blue;
color: yellow;
opacity: 0.65;
animation-name: box_change;
animation-duration: 10s;
animation-delay: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="box1">Hello Box</div>
</body>
</html>
除了宽高之外，盒子有边框，边框内部有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动起来看看效果：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
@keyframes box_change {
0% {
height: 50px;
width: 50px;
border-style: solid;
}
50% {
height: 200px;
width: 50px;
border-style: dotted;
}
100% {
height: 200px;
width: 200px;
border-style: dashed;
}
}
.box1 {
background-color: blue;
color: yellow;
border-width: 5px;
border-top-color: #f5222d;
border-bottom-color: #cf1322;
border-left-color: #a8071a;
border-right-color: #820014;
padding: 10px;
margin: 15px;
animation-name: box_change;
animation-duration: 10s;
animation-delay: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="box1">Hello Box</div>
</body>
</html>打开chrome的开发者工具，我们可以更清楚地看清content, padding, border, margin, 之间的关系：
Border取5px只是为了让其更容易被识别，但是太丑了，我们将其改为2px。效果就好得多了：
（学习视频分享：css视频教程）
以上是一文透過動畫來快速學習 css ！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
WebStorm Mac版
好用的JavaScript開發工具
記事本++7.3.1
好用且免費的程式碼編輯器
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
