css3實(shí)現(xiàn)動(dòng)畫(huà)的方式有哪些

這篇文章將為大家詳細(xì)講解有關(guān)css3實(shí)現(xiàn)動(dòng)畫(huà)的方式有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　css實(shí)現(xiàn)動(dòng)畫(huà)主要有3種方式，第一種是：transition實(shí)現(xiàn)漸變動(dòng)畫(huà)，第二種是：transform轉(zhuǎn)變動(dòng)畫(huà)，第三種是：animation實(shí)現(xiàn)自定義動(dòng)畫(huà)。

　　transition漸變動(dòng)畫(huà)

　　我們先看一下transition的屬性：

　　property:填寫(xiě)需要變化的css屬性如：width,line-height,font-size,color等,所有作用與dom樣式的屬性;

　　duration:完成過(guò)渡效果需要的時(shí)間單位(s或者ms)

　　timing-function:完成效果的速度曲線（linear,ease,ease-in,ease-out等等）

　　timing-function具體的值可以看下面的表格：

　　delay: 動(dòng)畫(huà)效果的延遲觸發(fā)時(shí)間(單位ms或者s)

　　下面我們看一個(gè)完整的例子：

　　<div class="base"></div>

　　.base {

　　width: 100px;

　　height: 100px;

　　display: inline-block;

　　background-color: #0EA9FF;

　　border-width: 5px;

　　border-style: solid;

　　border-color: #5daf34;

　　transition-property: width,height,background-color,border-width;

　　transition-duration: 2s;

　　transition-timing-function: ease-in;

　　transition-delay: 500ms;

　　/*簡(jiǎn)寫(xiě)*/

　　/*transition: all 2s ease-in 500ms;*/

　　&:hover {

　　width: 200px;

　　height: 200px;

　　background-color: #5daf34;

　　border-width: 10px;

　　border-color: #3a8ee6;

　　}

　　}

　　可以看到，鼠標(biāo)移上去的時(shí)候，動(dòng)畫(huà)延遲0.5s開(kāi)始，并且由于border-color沒(méi)有設(shè)置到transition-property里面，所以是沒(méi)有漸變動(dòng)畫(huà)的。

　　transform轉(zhuǎn)變動(dòng)畫(huà)

　　transform屬性應(yīng)用于2D 或 3D轉(zhuǎn)換。該屬性允許我們能夠?qū)υ剡M(jìn)行旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這四類操作.一般是配合transition的屬性一起使用。

　　none：定義不進(jìn)行任何轉(zhuǎn)換，一般用于注冊(cè)掉該轉(zhuǎn)換。

　　transform-functions：定義要進(jìn)行轉(zhuǎn)換的類型函數(shù)。主要有：

　　2.1 旋轉(zhuǎn)(rotate)：主要分為2D旋轉(zhuǎn)和3D旋轉(zhuǎn)。rotate(angle)，2D 旋轉(zhuǎn)，參數(shù)為角度，如45deg；rotate(x,y,z,angle)，3D旋轉(zhuǎn)，圍繞原地到(x,y,z)的直線進(jìn)行3D旋轉(zhuǎn)；rotateX(angle)，沿著X軸進(jìn)行3D旋轉(zhuǎn)；rotateY(angle)；rotateZ(angle)；

　　2.2 縮放(scale)：一般用于元素的大小收縮設(shè)定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z為收縮比例。

　　2.3 傾斜(skew)：主要用于對(duì)元素的樣式傾斜。skew(x-angle, y-angle)，沿著x和y軸的2D傾斜轉(zhuǎn)換；skewX(angle)，沿著x軸的2D傾斜轉(zhuǎn)換；skew(angle)，沿著y軸的2D傾斜轉(zhuǎn)換。

　　2.4 移動(dòng)(translate)：主要用于將元素移動(dòng)。translate(x, y)，定義向x和y軸移動(dòng)的像素點(diǎn)；translate(x, y, z)，定義像x、y、z軸移動(dòng)的像素點(diǎn)；translateX(x)；translateY(y)；translateZ(z)。

　　<h6>transition配合transform一起使用</h6>

　　<div class="base base2"></div>

　　.base2{

　　transform:none;

　　transition-property: transform;

　　&:hover {

　　transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);

　　}

　　}

　　可以看到盒子發(fā)生了旋轉(zhuǎn)，傾斜，平移，放大。

　　animation自定義動(dòng)畫(huà)

　　為了實(shí)現(xiàn)更靈活的動(dòng)畫(huà)效果，css3還提供了自定義動(dòng)畫(huà)的功能。

　　(1) name：需要綁定到選擇器的keyframe名稱。

　　(2) duration：完成該動(dòng)畫(huà)需要花費(fèi)的時(shí)間，秒或毫秒。

　　(3) timing-function：跟transition-linear一樣。

　　(4) delay：設(shè)置動(dòng)畫(huà)在開(kāi)始之前的延遲。

　　(5) iteration-count：設(shè)置動(dòng)畫(huà)執(zhí)行的次數(shù)，infinite為無(wú)限次循環(huán)。

　　(6) direction：是否輪詢反向播放動(dòng)畫(huà)。normal，默認(rèn)值，動(dòng)畫(huà)應(yīng)該正常播放；alternate，動(dòng)畫(huà)應(yīng)該輪流反向播放。

　　<h6 class="title">animate自定義動(dòng)畫(huà)</h6>

　　<div class="base base3"></div>

　　.base3 {

　　border-radius: 50%;

　　transform:none;

　　position: relative;

　　width: 100px;

　　height: 100px;

　　background: linear-gradient(

　　35deg,

　　#ccffff,

　　#ffcccc

　　);

　　&:hover {

　　animation-name: bounce;

　　animation-duration: 3s;

　　animation-iteration-count: infinite;

　　}

　　}

　　@keyframes bounce{

　　0% {

　　top: 0px;

　　}

　　50% {

　　top: 249px;

　　width: 130px;

　　height: 70px;

　　}

　　100% {

　　top: 0px;

　　}

　　}

關(guān)于“css3實(shí)現(xiàn)動(dòng)畫(huà)的方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。