1. 前言
近年來(lái)前端出現(xiàn)了太多了框架，美其名曰幫助用戶快速構(gòu)建應(yīng)用玄坦，但都淪為了資本流水線上的工人血筑。
懂的人自然懂。
學(xué)習(xí)資料：
2. 引入animate.css
我們采用CDN的方式引入煎楣，其實(shí)就是通過(guò)網(wǎng)絡(luò)的方式引入豺总。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識(shí)Animate.css</title>
<!-- 引入Animate.css -->
<link rel="stylesheet" >
</head>
3. 第一個(gè)動(dòng)畫(huà)
創(chuàng)建一個(gè)h1標(biāo)簽，并讓它動(dòng)起來(lái)择懂。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識(shí)Animate.css</title>
<!-- 引入Animate.css -->
<link rel="stylesheet" >
</head>
<body>
<h1>引入Animate css</h1>
<h1 class="animate__animated animate__bounce">An animated element</h1>
</body>
</html>
4. 什么是keyframes（關(guān)鍵幀）园欣？
在動(dòng)畫(huà)設(shè)計(jì)中，關(guān)鍵幀指的是動(dòng)畫(huà)序列中定義了特定時(shí)間點(diǎn)樣式變化的幀休蟹。
CSS中的@keyframes規(guī)則允許開(kāi)發(fā)者指定一個(gè)動(dòng)畫(huà)周期內(nèi)的關(guān)鍵幀，這些關(guān)鍵幀定義了動(dòng)畫(huà)在不同時(shí)間點(diǎn)的樣式日矫，從而創(chuàng)建出平滑的動(dòng)畫(huà)效果赂弓。
@keyframes是CSS3引入的一個(gè)特性，大大增強(qiáng)了網(wǎng)頁(yè)的動(dòng)態(tài)表現(xiàn)能力哪轿。
5. 嘗試各種動(dòng)畫(huà)
image.png
官網(wǎng)首頁(yè)的右側(cè)盈魁，提供了所有動(dòng)畫(huà)功能，逐個(gè)動(dòng)手體驗(yàn)一遍窃诉。
到目前為止杨耙，可以實(shí)現(xiàn)引入基本動(dòng)畫(huà)功能了赤套。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識(shí)Animate.css</title>
<link rel="stylesheet" >
</head>
<body>
<h1>Animate css 吸引眼球的12個(gè)動(dòng)畫(huà)</h1>
<h1>1. 彈跳</h1>
<div class="animate__animated animate__bounce">
<span>this a sentence.</span>
</div>
<h1>2. 閃爍</h1>
<div class="animate__animated animate__flash">
<span>this a sentence.</span>
</div>
<h1>3. 縮放</h1>
<div class="animate__animated animate__pulse">
<span>this a sentence.</span>
</div>
<h1>4. 橡皮筋</h1>
<div class="animate__animated animate__rubberBand">
<span>this a sentence.</span>
</div>
<h1>5. X軸晃動(dòng)</h1>
<div class="animate__animated animate__shakeX">
<span>this a sentence.</span>
</div>
<h1>6. Y軸晃動(dòng)</h1>
<div class="animate__animated animate__shakeY">
<span>this a sentence.</span>
</div>
<h1>7. X軸輕微晃動(dòng)</h1>
<div class="animate__animated animate__headShake">
<span>this a sentence.</span>
</div>
<h1>8. 搖擺（像釘在某一點(diǎn)上搖擺）</h1>
<div class="animate__animated animate__swing">
<span>this a sentence.</span>
</div>
<h1>9. tada</h1>
<div class="animate__animated animate__tada">
<span>this a sentence.</span>
</div>
<h1>10. 搖晃（像雨刷一樣搖擺）</h1>
<div class="animate__animated animate__wobble">
<span>this a sentence.</span>
</div>
<h1>11. 果凍</h1>
<div class="animate__animated animate__jello">
<span>this a sentence.</span>
</div>
<h1>12. 心跳</h1>
<div class="animate__animated animate__heartBeat">
<span>this a sentence.</span>
</div>
</body>
</html>
