溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css3動畫屬性有哪些

發(fā)布時間：2021-12-16 15:04:51 來源：億速云 閱讀：394 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“css3動畫屬性有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css3動畫屬性有哪些”吧!

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  ( 能支持過渡屬性的都會過渡變換  默認(rèn)值)
屬性值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ù)如果是正值的情況下：往右往下   負(fù)值：往左往上
		單獨(dú)設(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ù)相同，寫一個就行
        單獨(dú)設(shè)置X  Y
			transform:scaleX();
			transform:scaleY();
c.旋轉(zhuǎn)：transform:rotate();
			默認(rèn)情況下圍繞中心點(diǎn)轉(zhuǎn)動，轉(zhuǎn)動的是度數(shù)，deg!
		單獨(dú)設(shè)置圍繞某個軸（X  Y）
			transform:rotateX()
			transform:rotateY()
d.傾斜：transform:skew();
		單獨(dú)設(shè)置圍繞某個軸（X  Y）
			transform:skewX()
			transform:skewY()


補(bǔ)充：如果有兩個功能函數(shù)：先寫位移 再寫旋轉(zhuǎn)。

單獨(dú)舉例旋轉(zhuǎn)：

當(dāng)圍繞中心點(diǎn)時：

span{
            display: block;
            width: 300px;
            height: 150px;
            background: purple;
            transform: rotate(30deg);
        }

css3動畫屬性有哪些
當(dāng)圍繞X軸時：

span{
            display: block;
            width: 300px;
            height: 150px;
            background: purple;
            transform: rotateX(30deg);
        }

css3動畫屬性有哪些
可以看到，當(dāng)圍繞X軸旋轉(zhuǎn)時，盒子的上面往里，下面往外。

當(dāng)圍繞Y軸時：

 span{
            display: block;
            width: 300px;
            height: 150px;
            background: purple;
            transform: rotateY(30deg);
        }

css3動畫屬性有哪些
可以看到，圖片的左側(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()  //默認(rèn)情況效果類似
            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   動畫運(yùn)用的類型（勻速linear、加速度、減速度、貝塞爾曲線 step-start  //沒有動畫中間的過渡效果。每次直接跳到下一幀開始的地方）
        animation-delay  動畫的延遲
        animation-iteration-count   動畫運(yùn)動的次數(shù)（默認(rèn)情況下運(yùn)動1次） infinite(無限循環(huán))
        animation-direction  運(yùn)動的方向
                屬性值：
                    - reverse：反方向運(yùn)行 （ 讓關(guān)鍵幀從后往前執(zhí)行 ）
                    - alternate：動畫先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行
                    - alternate-reverse：動畫先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行
        animation-play-state 
                屬性值：
                    paused暫停
                    running運(yùn)動
	常用的寫法：
    		animation:關(guān)鍵幀的名稱  動畫運(yù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動畫屬性有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手