css:transform,transition,animation總結

sevi_stuo 發布于2019-08-30 15:53 / 3123人閱讀

摘要：等同于貝塞爾曲線元素樣式從初始狀態過渡到終止狀態速度是恒速。等同于貝塞爾曲線提供了類似關鍵幀控制的動畫效果，通過屬性實現。名稱說明用來指定一個關鍵幀動畫的名稱，這個動畫名必須對應一個規則。

1. transform 2d

名稱	說明
transform	變形功能
transform-orign	指定變換起點

1.1 transform的屬性值

名稱	說明	參數
translate/translateX/translateY	平移	長度值或百分數
scale/scaleX/scaleY	縮放	數值
rotate	旋轉	角度
skew	傾斜	角度
matrix	矩陣	略

例子：

 transform: translateX(100px);
 transform: translateX(50%);

 transform: scale(2);
 transform: scale(0.5);

 transform: rotate(45deg);順時針

 transform: skew(45deg,45deg);// 水平方向(0-90有意義) 豎直方向(0-90有意義)

附skew資料：CSS3 transform matrix矩陣與拉伸實例頁面

多重效果并行：只是效果，沒有過程，不存在線行：

transform: scale(0.5) rotate(45deg);

1.2 transform-orign

默認是中心點。可以設其他值。第一個參數是x軸，其值可以是left,center,right,也可以是百分數。第二個參數是y軸，其值可以是top,center,bottom，也可以使百分數。

例子：

transform-origin: 0 0;
transform-origin: left top;
transform-origin: 50% 50%;

2. transform 3d

名稱	說明
transform-style	展現樣式(flat/perserve3d)
perspective	指定變換起點

2.1 transform

3d就是多了一個z軸。transfrom的屬性值比2d多以下：

名稱	說明	參數
translate3d(x,y,z)/translateZ(z)	平移	長度值或百分數
scale3d(x,y,z)/scaleZ(z)	縮放	數值
rotateX(x)/rotate(y)/rotateZ(z)	旋轉	角度
matrix3d	矩陣	略

2.2 transform-style

指定嵌套元素如何在3d空間呈現。

名稱	說明
flat	2d屏幕
preserve-3d	3d屏幕

2.3 perspective

指眼睛距離3d元素的距離。

名稱	說明
none	默認值，表示無限的角度來看 3D 物體，但看上去是平的
長度值	接受一個長度單位大于0的值，其單位不能為百分比。值越大，角度出現的越遠，就好比你人離遠一點看物體。值越小，正相反。

2.4 perspective-origin

變型基點，同transform-origin

例子：

p{
    width: 200px;
    height: 200px;
    background-color: gray;
}
p.b{
    transform: translate3d(100px,100px,-200px);
}
div{
    perspective: 1000px;
    transform-style: preserve-3d;
}

3. transition

過渡效果一般是通過一些簡單的 CSS 動作觸發平滑過渡功能，比如： :hover、 :focus、
:active、:checked 等。CSS3 提供了 transition 屬性來實現這個過渡功能，主要屬性如
下表：

名稱	說明	參數
transition-property	指定CSS 屬性	none,all,指定屬性
transition-duration	所需時間	1s,2s
transition-timing-function	過程函數	ease,linear,ease-in,ease-out,ease-in-out
transition-delay	延時	1s,2s
transition	以上四種簡寫

沒有過渡效果的例子：

div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;
}
div:hover{
    background-color: green;
    color: white;
}

hello world

加上過度效果：

 div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease;
}

簡寫形式：

transition: all 2s ease;

名稱	說明
linear	元素樣式從初始狀態過渡到終止狀態速度是恒速。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease	默認值，元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢。等同于貝塞爾曲線(0.25, 0.1,0.25, 1.0)
ease-in	元素樣式從初始狀態過渡到終止狀態時，速度越來越快，呈一種加速狀態。等同于貝塞爾曲線(0.42, 0,1.0, 1.0)
ease-out	元素樣式從初始狀態過渡到終止狀態時，速度越來越慢，呈一種減速狀態。等同于貝塞爾曲線(0, 0, 0.58,1.0)
linear	元素樣式從初始狀態過渡到終止狀態速度是恒速。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease-in-out	元素樣式從初始狀態過渡到終止狀態時，先加速，再減速。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

4. animation

CSS3 提供了類似 Flash 關鍵幀控制的動畫效果，通過 animation屬性實現。那么之前的 transition屬性只能通過指定屬性的初始狀態和結束狀態來實現動畫效果，有一定的局限性。

animation 實現動畫效果主要由兩個部分組成：

1.通過類似 Flash 動畫中的關鍵幀聲明一個動畫；
2.在 animation 屬性中調用關鍵幀聲明的動畫。

名稱	說明
animation-name	用來指定一個關鍵幀動畫的名稱，這個動畫名必須對應一個@keyframes規則。CSS 加載時會應用 animation-name 指定的動畫，從而執行動畫。
animation-duration	用來設置動畫播放所需的時間
animation-timing-function	用來設置動畫的播放方式
animation-delay	用來指定動畫的延遲時間
animation-iteration-count	用來指定動畫播放的循環次數
animation-direction	用來指定動畫的播放方向
animation-play-state	用來控制動畫的播放狀態
animation-fill-mode	用來設置動畫的時間外屬性
animation	以上的簡寫形式

代碼：

@keyframes anim {
    0%,100% {
        background-color: maroon;
        color: gray;
    }
    50% {
        background-color: black;
        color: white;
    }
}
div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;
}
div:hover{
    animation-name: anim;
    animation-duration: 5s;
}

hello world

或者：

@keyframes anim {
    from {
        background-color: maroon;
        color: gray;
    }
    to {
        background-color: black;
        color: white;
    }
}

簡寫：

animation: anim 5s ease;

GPU云服務器云服務器 -transition transit Transition Transitions

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116565.html

10分鐘入門 CSS3 Animation

摘要：中文譯為轉換，但我更傾向于稱呼它變形大名鼎鼎的變形金剛叫。意為縮放，顧名思義，是用于改變元素的大小。每個時間點對應一個狀態，代表一個關鍵幀。我們可以在可視化的創建我們自己的貝塞爾曲線。簡介 Animation可以讓你不用依賴javascript或jquery，用純CSS在網頁中輕松實現各種動畫效果。兼容性 animation在絕大部分主流瀏覽器都得到了很好的支持！還在兼容IE9的同...

Elle 2019-08-02 13:57 評論0 收藏0
【Hello CSS】第九章-如何畫一個體驗更好的動畫？

摘要：那就是重力加速度的表現以及彈力球與空氣，地面所產生的摩擦力的表現。彈力球下落時，由于重力加速度的原因，所以速度會越來越大，往上跳時速度會越來越小直至。作者：陳大魚頭 github： KRISACHAN 在上一節中，不走心地畫了一些 CSS圖案，本節就繼續不走心地畫動畫。 CSS的動畫屬性在CSS中，animation 、 transition 跟 transform...

BothEyes1993 2019-08-30 15:44 評論0 收藏0
css過度與動畫

摘要：綜上，上面的代碼的值都應該加上，即逐幀動畫在實現一個卡通影片或者一個復雜的進度指示框，或者的標志時這種場景比較適應逐幀動畫。這種平滑特性不適用于逐幀動畫的實現。緩動效果回彈動畫效果是比較常見的動畫，比如小球的運動、對于尺寸變化和角度變化使用回彈效果可以增強動畫的體驗。小面介紹一些簡單的緩動效果的動畫。彈跳動畫的實現 css中所有過渡和動畫都是跟一條曲線（緩動曲線）有關的，這條曲線...

Kross 2019-08-29 12:36 評論0 收藏0
3D滾動下拉菜單-簡直不要太任性

摘要：看到一個很棒的菜單效果，分享一下原文滾動下拉菜單簡直不要太任性預覽先看看最終效果簡介由來最初看到這個是在年月，猛戳這里妙味官網，覺得非常炫。看到一個很棒的菜單效果，分享一下原文 3D滾動下拉菜單-簡直不要太任性預覽(先看看最終效果) http://runjs.cn/detail/re75abbw 簡介(由來) 最初看到這個是在14年5月，猛戳這里：妙味官網，覺得非常炫。想...

ruicbAndroid 2019-08-21 10:26 評論0 收藏0
Python開發【前端篇】HTML5+CSS3

摘要：權重權重權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用權重相同的，后寫的樣式會覆蓋前面寫的樣式。標簽支持格式屬性可選第三方播放器CSS權重 CSS權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用,權重相同的，后寫的樣式會覆蓋前面寫的樣式。權重的等級可以把樣式的應用方式分為幾個等級，按照等級來計算權重 1、!impo...

番茄西紅柿 2019-04-23 13:27 評論0 收藏0