CSS3 transition動畫、transform變換、animation動畫

時間 2019-11-12

標籤 css3 css transition 動畫 transform 變換 animation 欄目 CSS 简体版

原文原文鏈接

1、CSS3 transition動畫

transition能夠實現動態效果，其實是必定時間以內，一組css屬性變換到另外一組屬性的動畫展現過程。css

屬性參數：html

一、transition-property 設置過渡的屬性，好比：width height background-color
二、transition-duration 設置過渡的時間，好比：1s 500ms
三、transition-timing-function 設置過渡的運動方式css3

linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
cubic-bezier(n,n,n,n)
- 好比：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲線設置網站：https://matthewlein.com/ceaser/

四、transition-delay 設置動畫的延遲
五、transition: property duration timing-function delay 同時設置四個屬性app

舉例：

<style type="text/css">        
.box{
    width:100px;
    height:100px;
    background-color:gold;
    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;            
}
.box:hover{
    width:300px;
    height:300px;
    background-color:red;
}
</style>
......
<div class="box"></div>

2、CSS3 transform變換

css3引入了一些能夠對網頁元素進行變換的屬性，好比旋轉，縮放，移動，或者沿着水平或者垂直方向扭曲（斜切變換）等等。這些的基礎都是transform屬性，transform屬性有一項奇怪的特性，就是它們對於其周圍的元素不會產生影響。換句話說，若是將一個元素旋轉45度，它其實是重疊在元素的上方，下方或者旁邊。而不會移動其周圍的內容。動畫

屬性參數：網站

一、translate(x,y) 設置盒子位移
二、scale(x,y) 設置盒子縮放
三、rotate(deg) 設置盒子旋轉
四、skew(x-angle,y-angle) 設置盒子斜切
五、perspective 設置透視距離
六、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
七、translateX、translateY、translateZ 設置三維移動
八、rotateX、rotateY、rotateZ 設置三維旋轉
九、scaleX、scaleY、scaleZ 設置三維縮放
十、tranform-origin 設置變形的中心點
十一、backface-visibility 設置盒子背面是否可見3d

舉例：（翻面效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字說明</div>
    </div>
</body>
</html>

3、CSS3 animation動畫

transition只能從一組css屬性變成另外一組css屬性。animation則能夠在多組屬性之間變換。transition必須使用觸發器觸發，animation可使用觸發器，也能夠在頁面加載完成的時候自動觸發。code

屬性參數：orm

一、@keyframes 定義關鍵幀動畫
二、animation-name 動畫名稱
三、animation-duration 動畫時間
四、animation-timing-function 動畫曲線htm

linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數

五、animation-delay 動畫延遲
六、animation-iteration-count 動畫播放次數 n|infinite
七、animation-direction

normal 默認動畫結束不返回
Alternate 動畫結束後返回

八、animation-play-state 動畫狀態

paused 中止
running 運動

九、animation-fill-mode 動畫先後的狀態

none 不改變默認行爲
forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）
both 向前和向後填充模式都被應用

十、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性

舉例：（人物走路動畫）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路動畫</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

動畫中使用的圖片以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。