02-07-卡其漫畫-css3及動畫應用-動畫animate
前言：這篇文章中，咱們主要會介紹css3中animate動畫的建立和使用，經過animate的學習，咱們能夠進一步的理解以前transition過渡的特性，同時也可使用animate動畫在頁面中添加更加豐富的效果。css
以前咱們學習過transition過渡，咱們知道，過渡仍是有一些侷限的，如它只是兩個狀態之間的過渡，而且只能執行一次，執行以後會恢復到元素的原始狀態，要解決這些侷限，咱們就有必要來學習animate動畫了。這篇文章學習了以後，各位小夥伴能夠無比輕鬆的完成卡其漫畫中的一個動畫效果了：前端
學習動畫，主要能夠從兩個方面進行學習：css3
1.建立動畫學習
2.使用動畫動畫
首先來看下如何建立動畫，在以前使用transition的時候，咱們肯定了元素開始和結束時的狀態，這個開始和結束的狀態就能夠稱爲關鍵幀(什麼是關鍵幀，就是定義動畫在不一樣階段的狀態)，animate動畫和transition的第一個區別就是它能夠定義多個關鍵幀，來看下它的語法 ：spa
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
複製代碼
上面的語法 很差懂，咱們再細化一下：3d
@keyframes 動畫自定義名稱 {
from | 0% {
// 這裏就能夠爲元素添加樣式了
properties: value;
}
百分比 {
properties: value;
}
...
to | 100% {
properties: value;
}
}
說明：
1.@keyframes:關鍵幀，多個關鍵幀連續的播放就組成了動畫，@keyframes屬性能夠用來定義多個關鍵幀
1.中間的百分比能夠添加多個，以此來精確控制中間的狀態變化,如10%,20%,30%...
2.from是指開始狀態，所描述的時間和0%相同
3.to是指結束狀態，所描述的時間和100%相同
4.兩個關鍵幀以前的狀態變化是自動生成的，這點和過渡相似
好像咱們也能夠簡單認爲，animate動畫至關於擁有多個狀態變化的過渡
複製代碼
好了，不扯這麼多無聊的東西，咱們假如要實現一個簡單的動畫，那麼應該如何建立？code
很是簡單，這個效果稍稍 分析一下，就知道有如下個狀態：從 左上》右上》右下》 左下》左上orm
那咱們就能夠這樣來寫代碼了：cdn
// 盒子基本樣式
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
// 動畫名稱咱們自定義爲move
@keyframes move {
// 原始位置：左上
from {
transform: translate(0,0)
}
// 右上
25%{
transform: translate(300px,0)
}
// 右下
50%{
transform: translate(300px,300px)
}
// 左下
75%{
transform: translate(0px,300px)
}
// 原始位置：左上
to{
transform: translate(0,0)
}
}
複製代碼
嗯，感受是這麼回事，也沒有想象中的複雜，可是我怎麼去看這個動畫效果呢？@keyframes只是用於建立動畫，若是想使用這個動畫效果，咱們就必須學習css3中的animation相關樣式屬性了。
animation只是一個簡單屬性(相似於transition)，它其實由如下多個屬性共同組成：
animation-name:指定要綁定到選擇器的自定義動畫的名稱--必需
animation-duration：指定動畫完成所需的時間，默認值爲0，爲0不會播放動畫,單位爲s或者ms--必需
animation-timing-function：指定動畫播放時的速率曲線，默認爲ease,與transition同樣
animation-delay：指定動畫在啓動前的延遲間隔，默認爲0
animation-iteration-count：指定動畫的播放次數,默認爲1次，其中關鍵字infinite爲無限次
animation-direction：指定是否輪流反向播放動畫，默認爲normal正常
animation-fill-mode：指定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式，這個語言有點很差懂，呆會實例說明
animation-play-state：指定動畫的播放狀態：運行或暫停
複製代碼
太多啦，太多啦。。好在裏面只有兩個屬性是必需的：animation-name和animation-duration，猶豫什麼，咱們爲以前的div盒子指定動畫，兩個屬性走起：
.box {
width: 100px;
height: 100px;
background-color: #f00;
/* animation-name:指定動畫名稱 */
animation-name: move;
/* animation-duration：指定動畫完成的時間 */
animation-duration: 4s;
}
複製代碼
效果來一波：
咱們再將動畫的建立和使用綜合在一塊兒來講明一下：
嗯，應該大概清晰了。不可否認，確實出現了咱們大體想要的效果，可是仔細的觀察，仍是有一些問題。
首先，咱們以現盒子的移動不是勻速，而是 慢》快》慢 這樣的一個變化，那若是想設置盒子移動的速率，咱們就可使用animation-timing-function了，它的屬性值和以前所學習的transition沒有什麼區別，咱們來加上勻速效果：
........這裏只關注動畫相關代碼........
/* animation-name:指定動畫名稱 */
animation-name: move;
/* animation-duration：指定動畫完成的時間 */
animation-duration: 4s;
/* animation-timing-function：指定動畫的速率曲線 */
animation-timing-function:linear;
複製代碼
不要被上面的gif動圖騙到(頁面中gif會重複播放，可是並不表明動畫就是屢次執行的，因此你會看到一次執行完畢後會明顯的停滯)，若是大家親自動手試一試會發現動畫其實默認只會執行一次，那若是你想指定次數，就可使用animation-iteration-count了，
直接上代碼來一波：
/* animation-name:指定動畫名稱 */
animation-name: move;
/* animation-duration：指定動畫完成的時間 */
animation-duration: 4s;
/* animation-timing-function：指定動畫的速率曲線 */
animation-timing-function:linear;
/* animation-iteration-count:指定動畫播放的次數，infinite爲無限次 */
animation-iteration-count:2;
複製代碼
兩次以後纔會中止，嗯，這就是這個效果，若是你想永遠不停，那還不試下infinite?
接下來看一下一個比較有意思的屬性：animation-direction，它指定是否輪流反向播放動畫，什麼意思呢？大家都見過那種老式的擺鐘吧，從一邊擺過去，從另一邊擺回來，這種效果很容易想明白：開始>>結束再從結束>>開始，咱們乾脆就來實現這個簡易版的動畫玩一玩:
首先，添加一個元素，爲元素添加基本樣式：
.box{
width: 10px;
height: 200px;
/* 爲了看清楚，設置紅色背景 */
background-color: #f00;
/* 爲了看清楚，將元素放置到屏幕中間一點 */
margin:100px auto;
/* 設置旋轉軸心:頂部中間位置，這一步很重要，否則就會圍繞中心軸旋轉了 */
transform-origin: center top;
/* 設置起始的旋轉角度 */
transform: rotate(-60deg);
}
複製代碼
/* 建立動畫 */
@keyframes rotateClock {
from{
/* 開始時狀態 */
transform: rotate(-60deg)
}
to{
/* 結束時動畫 */
transform: rotate(60deg)
}
}
複製代碼
因而咱們就能夠爲元素添加動畫了：
.box{
width: 10px;
height: 200px;
/* 爲了看清楚，設置紅色背景 */
background-color: #f00;
/* 爲了看清楚，將元素放置到屏幕中間一點 */
margin:100px auto;
/* 設置放置軸心:頂部中間位置 */
transform-origin: center top;
transform: rotate(-60deg);
/* 指定動畫名稱 */
animation-name: rotateClock;
/* 指定動畫時間 */
animation-duration: 1s;
/* 指定動畫次數：infinite爲無限次 */
animation-iteration-count: infinite;
/* 指定動畫速率曲線 */
animation-timing-function: ease-in-out;
}
複製代碼
嗯，雖然出來效果，可是有問題？現實生活中的擺鐘是交替擺的效果，就是從開始到結束再從結束到開始。這個時候就使用到一個樣式了：animation-direction，它有四個值常見：
- normal:正常，從開始到結束
- reverse:反向，從結束到開始
- alternate:交替，從開始到結束，從結束到開始
- alternate-reverse：反向交替，從結束到開始，從開始到結束
這裏咱們感受應該選擇alternate啦，沒錯，你猜對啦！！趕快加上去，最終的樣式是這樣的：
.box{
width: 10px;
height: 200px;
/* 爲了看清楚，設置紅色背景 */
background-color: #f00;
/* 爲了看清楚，將元素放置到屏幕中間一點 */
margin:100px auto;
/* 設置放置軸心:頂部中間位置 */
transform-origin: center top;
transform: rotate(-60deg);
/* 指定動畫名稱 */
animation-name: rotateClock;
/* 指定動畫時間 */
animation-duration: 1s;
/* 指定動畫次數：infinite爲無限次 */
animation-iteration-count: infinite;
/* 指定動畫速率曲線 */
animation-timing-function: ease-in-out;
/* 指定輪流反向播放動畫 ，alternate是輪流，交替的意思*/
animation-direction:alternate;
}
複製代碼
怎麼樣，一個簡易的擺鐘效果就出來了，是否是很容易實現啊。。反正比js容易多了。。哈哈
最後，再來介紹其它幾個動畫相關樣式，先來關注下animation-delay,這個樣式是用來實現動畫效果的延遲，效果和transition-delay相似,如
animation-delay:2s;
複製代碼
有了這個樣式，那麼動畫會在延遲2s後再開始，小夥伴們能夠本身試下。
以後，咱們再來看下animation-fill-mode,文章前面說過它的做用是指定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式，這話太難懂了，說得直白一點，它就是用來設置動畫等待或者結束的狀態，它有三個常見值：
- forwards：動畫結束後，元素樣式停留在 100% 的樣式
- backwards： 在延遲等待的時間內，元素樣式停留在 0% 的樣式
- both： 同時設置了 forwards和backwards兩個屬性值
動畫也有一個默認的特性，就是執行完畢以後 就會恢復到元素的原始狀態，若是想要在動畫結束以後停留在結束時的狀態，forwards是你完美的選擇，咱們用簡單的一段樣式代碼來看下效果
對於backwards,咱們得加了延遲才能看到它的效果，咱們來看正面這一段動畫代碼：
.box{
width: 10px;
height: 200px;
/* 爲了看清楚，設置紅色背景 */
background-color: #f00;
/* 爲了看清楚，將元素放置到屏幕中間一點 */
margin:100px auto;
/* 設置放置軸心:頂部中間位置 */
transform-origin: center top;
/* 嘿嘿嘿嘿：注意這裏，咱們將初始的旋轉註釋了，意味着將沒有默認的旋轉了 */
/* transform: rotate(-60deg); */
/* 指定動畫名稱 */
animation-name: rotateClock;
/* 指定動畫時間 */
animation-duration: 1s;
/* 添加動畫的延遲 */
animation-delay: 2s;
}
/* 建立動畫 */
@keyframes rotateClock {
from{
transform: rotate(-60deg)
}
to{
transform: rotate(60deg)
}
}
複製代碼
注意上面的代碼，咱們爲動畫添加了延遲，在添加animation-fill-mode：backwards;以前的效果是什麼呢？你們仔細看：
看清楚了嗎？在延遲的時間段內，這並無進入到動畫的初始狀態，咱們在動畫的from的時候添加了rotate樣式，可是在2S範圍內它並無體現出這個rotate的效果，正面咱們添加animation-fill-mode：backwards來看下
.box{
width: 10px;
height: 200px;
/* 爲了看清楚，設置紅色背景 */
background-color: #f00;
/* 爲了看清楚，將元素放置到屏幕中間一點 */
margin:100px auto;
/* 設置放置軸心:頂部中間位置 */
transform-origin: center top;
/* transform: rotate(-60deg); */
/* 指定動畫名稱 */
animation-name: rotateClock;
/* 指定動畫時間 */
animation-duration: 1s;
/* 添加動畫的延遲 */
animation-delay: 2s;
/* 設置保持動畫開始時的狀態：不論是否有延遲，都會馬上進入到動畫的初始狀態 */
animation-fill-mode: backwards;
}
複製代碼
都看明白了吧，效果其實很簡單，主要是本身須要去體驗一下。那若是我想動畫一開始就進入到初始狀態，同時又須要保持它結束時的狀態怎麼辦呢？嗯，還有一個屬性both就是實現這個效果了：
animation-fill-mode: both;
複製代碼
這裏我就再也不作演示了。
相信不少小夥伴也看到，動畫相關屬性很是多，咱們在使用動畫的時候若是每次都要寫這麼多代碼，那實在是太麻煩了，因此，之後經常使用的方式仍是使用簡寫方式，它的語法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
用中文再說一次：
animation: 動畫名稱 動畫時間 速率曲線 動畫延遲 執行次數 是否交替 開始和結束時的狀態 動畫的播放狀態;
說明：除了name和duration是必須的，其它都是能夠選擇賦值的
複製代碼
舉個例子，咱們實現最初的盒子矩形環繞一週的效果，樣式也能夠這樣寫：
animation: move 4s linear 0s infinite;
複製代碼
其它的樣式效果能夠根據須要進行添加哦！
好了，最後，咱們須要回到文章的開關所說的一個頁面效果了，掌握了前面的動畫的建立和添加代碼以後，咱們來簡單的作下這個效果：
頁面元素代碼，咱們爲元素添加了up這個類樣式
<div class="upload fr">
<i class="icon up"></i>
<span>我要投稿</span>
</div>
複製代碼
以後，建立動畫，並在fr的hover狀態下添加動畫效果
.fr:hover .up {
animation-name: upload;
animation-duration: .4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes upload {
from {
transform: translateY(0px)
}
to{
transform: translateY(-8px)
}
}
複製代碼
到這篇文件爲止，css3及動畫的應用就大概介紹完了，同時記得文章還有配套的視頻哦，到時候會一併在文章頁上體現出來，若是各位小夥伴還有其餘的須要，想學習其它的前端知識，能夠留言，咱們會爲你們增長新的文章，祝願各位小夥伴在前端的道路上一切順利哦！！
- 1. svg動畫 animate
- 2. JQuery animate動畫
- 3. Animate 動畫
- 4. css animate 動畫
- 5. css3 animate 經常使用動畫
- 6. css3 動畫+動畫庫
- 7. css3 動畫 vs js 動畫
- 8. JS動畫與CSS3動畫
- 9. css animate動畫demo
- 10. jquery的animate動畫
- 更多相關文章...
- • ionic 加載動畫 - ionic 教程
- • PHP imagearc - 畫橢圓弧 - PHP參考手冊
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
- 1. svg動畫 animate
- 2. JQuery animate動畫
- 3. Animate 動畫
- 4. css animate 動畫
- 5. css3 animate 經常使用動畫
- 6. css3 動畫+動畫庫
- 7. css3 動畫 vs js 動畫
- 8. JS動畫與CSS3動畫
- 9. css animate動畫demo
- 10. jquery的animate動畫