css3動畫屬性有哪些
本篇內(nèi)容主要講解“css3動畫屬性有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“css3動畫屬性有哪些”吧!
企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴展宣傳的重要窗口，一個合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，創(chuàng)新互聯(lián)公司面向各種領(lǐng)域：自上料攪拌車等成都網(wǎng)站設(shè)計公司、全網(wǎng)營銷推廣解決方案、網(wǎng)站設(shè)計等建站排名服務(wù)。
css3三大動畫屬性是：1、transition屬性，用于設(shè)置元素的過渡效果；2、transform屬性，用于向元素應(yīng)用2D或3D轉(zhuǎn)換（旋轉(zhuǎn)、縮放、移動或傾斜）；3、animation屬性，需要和“@keyframes”一起使用來創(chuàng)建動畫。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3動畫屬性分為：transform、transition、animation
1.transition(過渡)
a:transition-property：檢索或設(shè)置對象中的參與過渡的屬性 b.transition-duration：檢索或設(shè)置對象過渡的持續(xù)時間 c.transition-delay：檢索或設(shè)置對象延遲過渡的時間 d.transition-timing-function：檢索或設(shè)置對象中過渡的動畫類型 簡寫： transition: 屬性值1 屬性值2 屬性值3 屬性值4 屬性值1： 需要參與過渡屬性 all ( 能支持過渡屬性的都會過渡變換 默認值) 屬性值2： 過渡的時間 s秒 ms 毫秒 屬性值3： 延遲的時間 s秒 ms 毫秒 屬性值4： 動畫的類型（勻速、勻加速、勻減速........）
例如：transition:3s 2s linear;
2.transform
2D
a.位移：transform:translate(參數(shù)1，參數(shù)2) 參數(shù)1：在X軸移動的距離 參數(shù)2：在Y軸移動的距離 ps:參數(shù)如果是正值的情況下：往右往下 負值：往左往上 單獨設(shè)置X/Y的位移： transform:translateX(參數(shù)); transform:translateY(參數(shù)); b.縮放：transform:scale(參數(shù)1，參數(shù)2); 參數(shù)1：X軸縮放的比例 參數(shù)2：Y軸縮放的比例 ps:參數(shù)小于1,縮小；參數(shù)大于1，放大。如果兩參數(shù)相同，寫一個就行 單獨設(shè)置X Y transform:scaleX(); transform:scaleY(); c.旋轉(zhuǎn)：transform:rotate(); 默認情況下圍繞中心點轉(zhuǎn)動，轉(zhuǎn)動的是度數(shù)，deg! 單獨設(shè)置圍繞某個軸（X Y） transform:rotateX() transform:rotateY() d.傾斜：transform:skew(); 單獨設(shè)置圍繞某個軸（X Y） transform:skewX() transform:skewY() 補充：如果有兩個功能函數(shù)：先寫位移 再寫旋轉(zhuǎn)。
單獨舉例旋轉(zhuǎn)：
當圍繞中心點時：
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotate(30deg);
}
當圍繞X軸時：
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotateX(30deg);
}
可以看到，當圍繞X軸旋轉(zhuǎn)時，盒子的上面往里，下面往外。
當圍繞Y軸時：
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotateY(30deg);
}
可以看到，圖片的左側(cè)往外，右側(cè)往里。
3D
形成3D空間：transform-style:preserve-3d
a.位移： transform:translate(x,y,z); translateX() translateY() translateZ(不能是百分比) b.旋轉(zhuǎn)： transform:rotate(); rotateX() rotateY() rotateZ() //默認情況效果類似 rotate3D(x,y,z,a) [ 0不旋轉(zhuǎn)。1旋轉(zhuǎn) ] - x：是一個0到１之間的數(shù)值，主要用來描述元素圍繞X軸旋轉(zhuǎn)的矢量值； - y：是一個０到１之間的數(shù)值，主要用來描述元素圍繞Y軸旋轉(zhuǎn)的矢量值； - z：是一個０到１之間的數(shù)值，主要用來描述元素圍繞Z軸旋轉(zhuǎn)的矢量值； - a：是一個角度值，主要用來指定元素在3D空間旋轉(zhuǎn)的角度，如果其值為正值，元素順時針旋轉(zhuǎn)，反之元素逆時針旋轉(zhuǎn)。
3.animation
制定關(guān)鍵幀：
@keyframes 關(guān)鍵幀的名稱{
from{}
to{}
或者
0%{
}
50%{
}
100%{
}
}
調(diào)用關(guān)鍵幀
animation: 復(fù)合屬性
animation-name 關(guān)鍵幀的名稱
animation-duration 動畫的持續(xù)的時間
animation-timing-function 動畫運用的類型（勻速linear、加速度、減速度、貝塞爾曲線 step-start //沒有動畫中間的過渡效果。每次直接跳到下一幀開始的地方）
animation-delay 動畫的延遲
animation-iteration-count 動畫運動的次數(shù)（默認情況下運動1次） infinite(無限循環(huán))
animation-direction 運動的方向
屬性值：
- reverse：反方向運行 （ 讓關(guān)鍵幀從后往前執(zhí)行 ）
- alternate：動畫先正常運行再反方向運行，并持續(xù)交替運行
- alternate-reverse：動畫先反運行再正方向運行，并持續(xù)交替運行
animation-play-state
屬性值：
paused暫停
running運動
常用的寫法：
animation:關(guān)鍵幀的名稱 動畫運動的時間 linear(勻速) 動畫延遲的時間例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
/* 3D的空間 */
transform-style: preserve-3d;
/* 為了方便觀察讓3D舞臺轉(zhuǎn)動角度 */
transform:rotateX(20deg) rotateY(30deg);
transition:2s;
animation: hh 2s linear infinite;
}
.box p{
width:300px;
height:300px;
text-align: center;
line-height:300px;
font-size: 100px;
font-weight:bolder;
color:#fff;
/* 讓6個面全部定位在父元素里面 */
position:absolute;
left:0;top:0;
/* 透明 */
opacity:1;
border:2px solid #000;
/* 使背面不可見！ */
backface-visibility:hidden;
}
.con1{
/* 第一個面往前走 */
background:red;
transform:translateZ(150px);
}
.con2{
/* 第二個面往后走 */
background:blue;
transform:translateZ(-150px) rotateY(180deg); /*rotateY(180deg) 讓正面朝外*/
}
.con3{
/* 先往上位移150px 再繞著X軸轉(zhuǎn)動90deg */
background:pink;
transform:translateY(-150px) rotateX(90deg);
}
.con4{
/* 先往下位移150px,再繞著X軸轉(zhuǎn)動90deg */
background:green;
transform:translateY(150px) rotateX(-90deg);
}
.con5{
/* 先往左位移150px , 再繞著Y軸轉(zhuǎn)動90deg */
background:rosybrown;
transform:translateX(-150px) rotateY(-90deg);
}
.con6{
/* 先往右側(cè)位移150px,再繞著Y軸轉(zhuǎn)動90deg */
background:#000;
transform:translateX(150px) rotateY(90deg);
}
@keyframes hh{
from{
transform:rotateX(-20deg) rotateY(0deg) ;
}
to{
transform:rotateX(340deg) rotateY(360deg) ;
}
}
</style>
</head>
<body>
<p class="box">
<p class="con1">1</p>
<p class="con2">2</p>
<p class="con3">3</p>
<p class="con4">4</p>
<p class="con5">5</p>
<p class="con6">6</p>
</p>
</body>
</html>到此，相信大家對“css3動畫屬性有哪些”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
當前文章：css3動畫屬性有哪些
文章源于：http://muchs.cn/article14/jcjoge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、、全網(wǎng)營銷推廣、建站公司、電子商務(wù)、營銷型網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)別和優(yōu)勢 2016-11-11
- 成都建站公司如何設(shè)計制作動態(tài)的網(wǎng)站 2016-10-01
- 企業(yè)站使用靜態(tài)網(wǎng)頁還是使用動態(tài)網(wǎng)頁 2016-11-11
- 上海網(wǎng)站建設(shè)常識之動態(tài)網(wǎng)站靜態(tài)網(wǎng)站 2020-07-07
- 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁有什么不同? 2016-11-05
- 動態(tài)網(wǎng)站與靜態(tài)網(wǎng)站哪種更有利于SEO優(yōu)化？ 2015-07-07
- 動態(tài)網(wǎng)站設(shè)計動態(tài)網(wǎng)頁制作 2021-01-09
- 動態(tài)網(wǎng)頁設(shè)計的幾個誤區(qū) 2016-10-31
- 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)別在哪里？ 2015-10-21
- Web服務(wù)器與動態(tài)網(wǎng)頁 2016-11-09
- 企業(yè)網(wǎng)站建設(shè)為何選擇動態(tài)網(wǎng)頁設(shè)計 2013-10-25
- 網(wǎng)站建設(shè)的時候應(yīng)該選擇靜態(tài)頁面還是動態(tài)頁面 2016-10-30