CSS的animation屬性使用實(shí)例講解

一、animation的語(yǔ)法
1、@keyframes——插入關(guān)鍵幀
(1)FormTo形式:
- @keyframes demo {
- from {
- Properties:Properties value;
- }
- Percentage {
- Properties:Properties value;
- }
- to {
- Properties:Properties value;
- }
- }
(2)百分比的形式:
- @keyframes demo {
- 0% {
- Properties:Properties value;
- }
- Percentage {
- Properties:Properties value;
- }
- 100% {
- Properties:Properties value;
- }
- }
2、animation-name——定義動(dòng)畫的名稱
animation-name: none | “動(dòng)畫的名稱”;
(1)動(dòng)畫的名稱是由Keyframes創(chuàng)建的動(dòng)畫名,這里必須和創(chuàng)建的動(dòng)畫名保持一致。如果不一致,將不能實(shí)現(xiàn)任何動(dòng)畫效果
(2)none為默認(rèn)值,當(dāng)值為none時(shí),將沒有任何動(dòng)畫效果
3、animation-duration
animation-duration: time (s)
animation-duration是指定元素播放動(dòng)畫所持續(xù)的時(shí)間,取值為數(shù)值,單位為秒(s),其默認(rèn)值為“0”。
4、animation-timing-function
animation-timing-function:ease(緩沖) || ease-in(加速) || ease-out(減速) || ease-in-out(先加速后減速) || linear(勻速) || cubic-bezier(自定義一個(gè)時(shí)間曲線)
animation-timing-function是用來(lái)指定動(dòng)畫的播放方式,具有以下六種變換方式:ease(緩沖);ease-in(加速);ease-out(減速);ease-in-out(先加速后減速);linear(勻速);cubic-bezier(自定義一個(gè)時(shí)間曲線)。
5、animation-delay
animation-delay: time(s)
animation-delay:是用來(lái)指定元素動(dòng)畫開始時(shí)間。取值為數(shù)值,單位為秒(s),其默認(rèn)值為“0”。這個(gè)屬性和animation-duration使用方法是一樣的。
6、animation-iteration-count
animation-iteration-count:infinite || number
animation-iteration-count是指定元素播放動(dòng)畫的循環(huán)次數(shù),其取值為數(shù)字,默認(rèn)值為“1”或者infinite(無(wú)限次數(shù)循環(huán))。
7、animation-direction
animation-direction: normal || alternate
animation-direction是指定元素動(dòng)畫播放的方向,如果是normal,那么動(dòng)畫的每次循環(huán)都是向前播放;如果是alternate,那么動(dòng)畫播放在第偶數(shù)次向前播放,第奇數(shù)次向反方向播放。
8、animation-play-state
animation-play-state:running || paused
animation-play-state主要是用來(lái)控制元素動(dòng)畫的播放狀態(tài)。其主要有兩個(gè)值,running和paused,其中running為默認(rèn)值。這個(gè)屬性目前很少內(nèi)核支持,所以只是稍微提一下。
二、animation事件接口
其實(shí)目前基本的就是三個(gè)事件而已:開始、迭代、結(jié)束。開始和結(jié)束都知道是什么意思。至于這個(gè)迭代,由于animation中有個(gè)iteration-count屬性,它可以定義動(dòng)畫重復(fù)的次數(shù),因此動(dòng)畫會(huì)有許多次開始和結(jié)束。但是真正的“開始”和“結(jié)束”事件是關(guān)于整個(gè)動(dòng)畫的,他們只會(huì)觸發(fā)一次,而中間由于重復(fù)動(dòng)畫引起的“結(jié)束并開始下一次”將觸發(fā)整個(gè)“迭代”事件。
這三個(gè)事件的標(biāo)準(zhǔn)名稱是:
開始:animationstart
迭代:animationiteration
結(jié)束:animationend
但是目前版本的Chrome需要加上webkit前綴,而且還要注意大小寫
開始:webkitAnimationStart
迭代:webkitAnimationIteration
結(jié)束:webkitAnimationEnd
最后是實(shí)例代碼和截圖
- <style>
- @-webkit-keyframes test {
- 0% {background:red;}
- 25% {background:green;}
- 50% {background:blue;}
- 100% {background:red;}
- }
- @keyframes test {
- 0% {background:red;}
- 25% {background:green;}
- 50% {background:blue;}
- 100% {background:red;}
- }
- </style>
- <script>
- onload=function(){
- var html=document.documentElement;
- //定義事件回調(diào)函數(shù)
- var start=function(){
- console.log("start");
- },iteration=function(e){
- console.log(e);
- },end=function(){
- console.log("end");
- };
- //綁定事件
- html.addEventListener("webkitAnimationIteration",iteration);
- html.addEventListener("animationiteration",iteration);
- html.addEventListener("webkitAnimationStart",start);
- html.addEventListener("animationstart",start);
- html.addEventListener("webkitAnimationEnd",end);
- html.addEventListener("animationend",end);
- //開始執(zhí)行動(dòng)畫
- html.style.animation=
- html.style.WebkitAnimation=
- "test 1s linear 0s 3";
- };
- </script>
相關(guān)文章
- 這篇文章主要介紹了CSS3中Animation屬性的使用詳解,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-06
深入探究CSS中Animations和Transitions的工作原理
這篇文章主要介紹了深入探究CSS中Animations和Transitions的工作原理,包括和GPU的硬件使用及相關(guān)屬性等內(nèi)容,需要的朋友可以參考下2015-06-28CSS3的transition和animation的用法實(shí)例介紹
transition用于設(shè)定一個(gè)元素的兩個(gè)狀態(tài),不同的狀態(tài)可以用偽類,下面與大家分享下CSS3的transition和animation的用法,需要的朋友可以參考下2014-08-20