css3動畫效果小結

時間 2019-11-10

標籤 css3 css 動畫效果小結欄目 CSS 简体版

原文原文鏈接

css3動畫效果小結css

css3的動畫功能有如下三種:

　　一、transition(過分屬性)html

　　二、animation(動畫屬性)css3

　　三、transform(2D/3D轉換屬性)web

下面逐一進行介紹個人理解：

一、transition:<過渡屬性名稱> <過渡時間> <過渡模式>

　　如-webkit-transition:color 1s;瀏覽器

等同於:css3動畫

　　-webkit-transition-property:color;ide

　　-webkit-transition-duration:1s;動畫

多個屬性的過渡效果能夠這樣寫：spa

　　方法1：-webkit-transition:<屬性1> <時間1> ,<屬性2> <時間2> ,。。。ssr

　　方法2：

　　　　　　-webkit-transition:<屬性1> <時間1>;

　　　　　　-webkit-transition:<屬性2> <時間2>;

transition-timing-function屬性值有5個:

　　ease:緩慢開始，緩慢結束

　　liner:勻速

　　ease-in:緩慢開始

　　ease-out:緩慢結束

　　ease-in-out:緩慢開始，緩慢結束（和ease稍有區別）

實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition過渡效果</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            position: relative;
            left: 0px;
            top: 0px;
            transition: top 5s ease,left 5s ease ;
            -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */
            -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */
            -o-transition: top 5s ease,left 5s ease ; /* Opera */
        }
        .btn{
            width: 512px;
            margin: 0 auto;
            border: 2px solid #e3e3e3;
            border-radius: 5px;
            padding: 10px;

        }
        .btn button{
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-right: 20px;
        }
        button:last-child{
            margin-right: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            var e1 = document.getElementById("e1");
            var e2 = document.getElementById("e2");
            var e3 = document.getElementById("e3");
            var e4 = document.getElementById("e4");
            var e5 = document.getElementById("e5");
            var box = document.getElementById("box");
            e1.onclick=function(){
                box.style.left = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease";
            };
            e2.onclick=function(){
                box.style.right = 0+"px";
                box.style.top = 0+"px";
                box.style.transitionTimingFunction="liner";
            };
            e3.onclick=function(){
                box.style.right = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease-in";
            };
            e4.onclick=function(){
                box.style.left = 0+"px";
                box.style.top = 0+"px";
                box.style.transitionTimingFunction="ease-out";
            };
            e5.onclick=function(){
                box.style.left = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease-in-out";
            };

        }
    </script>
</head>
<body>
    <div id="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <div class="btn">
        <button id="e1">ease</button>
        <button id="e2">liner</button>
        <button id="e3">ease-in</button>
        <button id="e4">ease-out</button>
        <button id="e5">ease-in-out</button>
    </div>
</body>
</html>

transition過渡效果Code

二、動畫屬性animation

　　animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始以前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

　　註釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。

　　@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。合法的值： 0-100% from（與 0% 相同） to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

　　以百分比來規定改變發生的時間，或者經過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。

　　0% 是動畫的開始時間，100% 動畫的結束時間。

例如：

　　animation:mymove 5s infinite;

　　@keyframes mymove{

　　　　from{ top:0px; }

　　　　to{ top:200px; }

　　}

還能夠這麼寫：

　　@keyframes mymove{

　　　　0%{ top:0px; }

　　　　25%{ top:200px; }

　　　　50%{ top:100px; }

　　　　75%{ top:200px; }

　　　　100%{ top:0px; }

　　}

案例：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>

<div></div>

</body>
</html>

css3的animation效果code

三、設置3D場景（即transform）

　　　　-webkit-perspective:800;(單位爲像素)--即三維物體距離屏幕的距離。

　　　　-webkit-perspective-origin:50% 50%;(這個屬性表明了人眼觀察的視野。50% 50%爲X軸、Y軸相應的位置，即屏幕的正中央。)

　　使用transform屬性調整元素：-webkit-transform-style:-webkit-perserve-3d;(這個屬性是告訴瀏覽器咱們是在一個三維空間中對元素進行操做)

　　(1)、translate(移動距離)

　　　　translateX（x px）

　　　　translateY（y px）

　　　　translateZ（z px）

　　(2)、rotate(旋轉角度)

　　　　rotateX(x deg)

　　　　rotateY(y deg)

　　　　rotateZ(z deg)

　　transform：rotate（45deg）

　　　　rotateX:向屏幕上邊沿向內旋轉爲正方向。

　　　　rotateY:向屏幕豎直向下爲正方向。

　　　　rotateZ:向屏幕外爲正方向。

　　一個div塊，右邊沿向屏幕內旋轉45deg,即應設置爲：Transform：rotateY（45deg）。

實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform3D轉換效果</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            position: relative;
            left: 0px;
            top: 0px;
            perspective:800px;
            perspective-origin:50% 50%;
            transform-style: preserve-3d;
            transform-origin:0% 100%;//以Y軸爲旋轉中心
        }
        p{
            margin:20px 520px;
        }
        .btn{
            width: 300px;
            margin: 0 auto;
            border: 2px solid #e3e3e3;
            border-radius: 5px;
            padding: 10px;

        }
        .btn button{
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-right: 20px;
        }
        button:last-child{
            margin-right: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            var tx = document.getElementById("tx");
            var ty = document.getElementById("ty");
            var tz = document.getElementById("tz");
            var rx = document.getElementById("rx");
            var ry = document.getElementById("ry");
            var rz = document.getElementById("rz");
            var box = document.getElementById("box");
            tx.onclick=function(){
                box.style.transform = "translateX(500px)";
            };
            ty.onclick=function(){
                box.style.transform = "translateY(400px)"
            };
            rx.onclick=function(){
                box.style.transform = "rotateX(30deg)"
            };
            ry.onclick=function(){
                box.style.transform = "rotateY(30deg)"
            };
            rz.onclick=function(){
                box.style.transform = "rotateZ(30deg)"
            };
        }
    </script>
</head>
<body>
    <div id="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <p>translate(移動距離)</p>
    <div class="btn">
        <button id="tx">translateX</button>
        <button id="ty">translateY</button>
    </div>
    <p>rotate(旋轉角度)</p>
    <div class="btn">
        <button id="rx">rotateX</button>
        <button id="ry">rotateY</button>
        <button id="rz">rotateZ</button>
    </div>
</body>
</html>