這篇文章帶大家深入解析如何實現動畫效果，透過動畫來快速學習 css ，希望對大家有幫助！
隨著業務對前端的需求越來越多，身為前端三大法寶之一的css也越變越複雜。給初學的同學們帶來了一定的壓力。 css具體到每一個屬性也都沒有多複雜，主要問題在於知識點比較多。好不容易把主要知識點學完了，一看網路上的題，或是一看大師們寫的css的書，又被淹沒到新的海洋中。
其實人類的大腦不善於記憶零散的知識點，但是如果有一條邏輯線能夠將這些知識串聯起來，就能大大方便大腦的記憶和搜尋。這個線索要有邏輯，最好還是有趣。
剛好，css的動畫就是這樣一個有趣的線索，可以在動畫的變化中理解css屬性。
例如我們知道css增加了圓角矩形的border-radius屬性，那麼設定不同大小的圓角，是什麼樣的效果呢？與其一次次地改大小去試驗，不如我們做成一個動畫讓其一目了然：
我們還可以讓其移動位置中變形：
甚至我們還能讓其轉圈：
在串起其它屬性之前，我們先理解下動畫。
動畫的核心關鍵字在於「動」。 我們要回答幾個問題:
這些問題的結果，就構成了一個動畫的構成要素。
首先是動的主體是什麼？就是我們的HTML標籤，或是標籤構成的複雜元件之類的。對我們來說，主要就是
transition動畫
我們先學習一個簡單的css屬性動畫，叫做transition。 它就是由上面的4個屬性組成的：
我們來看個例子：
#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>我们现在终于可以看看开篇时的第一个动画是如何写成的了：
@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中文網其他相關文章！
