CSS3 之 transform & transition & animation

落霞與孤鶩齊飛發表於2018-06-09
CSSS3ORM

2d轉換

transform: translate(x, y); 沿著 X 和 Y 軸移動元素。
transform: translate(100px, 100px);

transform: rotate(angle); 旋轉元素。
transform: rotate(45deg);

transform: scale(x, y); 倍數改變元素的寬度和高度。
transform: scale(2, 3);

transform: skew(x, y); 沿著 X 和 Y 軸傾斜。
transform: skew(45deg, -45deg);

transform-origin: x y; 旋轉的基點位置（預設center center）。
transform-origin: right bottom;

transform: translateX(45px) rotate(45deg); 合併簡寫

瀏覽器的相容處理

-webkit-transform:    translateX(160px); Chrome、Safari
-moz-transform: rotate(60deg); FF
-o-transform: skew(30deg, 60deg); Opera
-ms-transform-origin: center center; IE

過渡動畫

transition: all 6s ease-in-out 2s;

transition-property: width; 規定應用過渡的 CSS 屬性的名稱。
transition-duration: 2s; 定義過渡效果花費的時間。預設是 0。
transition-timing-function: ease-in-out; 規定過渡效果的時間曲線。預設是 ease 勻速。
transition-delay: .5s; 規定過渡效果何時開始。預設是 0。

.box{
    width: 100px;
    height: 100px;
    background: red;
    transition-property: background-color, width;
    transition-duration: 6s;
    transition-timing-function: ease-in-out;
    transition-delay: 2s;
    
    /* transition:all 6s ease-in-out 2s; */
}
.box:hover{
    background: #f0f;
    width: 500px;            
}

幀動畫

animation-name: forward; 動畫的名稱
animation-duration: 5s;    動畫的時間
animation-timing-function: ease-in-out | step(5); 動畫播放方法
animation-delay 等待多長的時間
animation-iteration-count: infinite; 動畫播放的次數
animation-direction: alternate; 是否輪流反向播放
animation-play-state: paused; 暫停動畫    
    
@keyframes forward {
    10%, 90%{
        /* css程式碼 */
    }

    50%{
        /* css程式碼 */
    }

    100%{
        /* css程式碼 */
    }
}

3d轉換

transform-style: "preserve-3d";
perspective: 24px;  設定元素被檢視位置的檢視  
perspective-oragin: center center; 改變視點的位置

transform: translate3d();
transform: translateX();
transform: translateY();
transform: translateZ();

transform: rotate3d();
transform: rotateX();
transform: rotateY();
transform: rotateZ();

transform: scale3d();
transform: scaleX();
transform: scaleY();
transform: scaleZ();

相關文章