CSS3中的動畫功能

最新推荐文章于 2022-10-25 11:57:54 发布

lulu_jiang

最新推荐文章于 2022-10-25 11:57:54 发布

阅读量902

点赞数

分类专栏： CSS3 文章标签： css div transition safari chrome

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7818552

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Transitions功能

將元素的某個屬性從一個屬性值在指定時間內平滑過渡到另一個屬性值來實現動畫功能

transition:property duration timing-function

property：表示對哪個屬性進行平滑過渡

duration：表示在多長時間內完成屬性值的平滑

timing-function：表示通過什麽方法來進行平滑過渡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            background-color:#ffff00;
            -moz-transition:background-color 2s linear,color 2s linear;
            -webkit-transition:background-color 2s linear,color 2s linear;
            -o-transition:background-color 2s linear,color 2s linear;
        }
        div:hover{
            background-color:#00ffff;
            color:Red;
        }
        </style>
    </head>
    <body>
        <div>哈羅</div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        img{
            position:absolute;
            left:0;
            background-color:#ffff00;
            -moz-transform:rotate(0deg);
            -moz-transition:left 2s linear,-moz-transform 2s linear;
            -webkit-transform:rotate(0deg);
            -webkit-transition:left 2s linear,-webkit-transform 2s linear;
            -o-transform:rotate(0deg);
            -o-transition:left 2s linear,-o-transform 2s linear;
        }
        div:hover img{
            position:absolute;
            left:30px;
            -moz-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            -o-transform:rotate(90deg);
        }
        </style>
    </head>
    <body>
        <div>
            <img src="test.png" alt="*" />
        </div>
    </body>
</html>

Animations功能

Transitions只能通過指定屬性的開始值與結束值，在這兩個屬性值間進行平滑過度實現動畫效果

Animations通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現更為複雜的動畫

目前僅Safari，Chrome瀏覽器支持

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{background-color:Red;-webkit-transform:rotate(0deg);}
        @-webkit-keyframes mycolor{
            0%{background-color:Red;-webkit-transform:rotate(30deg);}
            40%{background-color:darkblue;-webkit-transform:rotate(60deg);}
            70%{background-color:Yellow;-webkit-transform:rotate(90deg);}
            100%{background-color:Red;-webkit-transform:rotate(0deg);}
        }
        div:hover{
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            /* 設置動畫播放次數，infinite為不停的循環播放 */
            -webkit-animation-iteration-count:infinite;
            /* -webkit-animation-iteration-count:5; */
        }
        </style>
    </head>
    <body>
        <div>哈羅</div>
    </body>
</html>

實現動畫的方法

linear：在動畫開始時到結束時以同樣的速度進行改變

ease-in：動畫開始時速度慢，讓后速度沿曲綫值進行加快

ease-out：動畫開始時速度快，讓后速度沿曲綫值進行放慢

ease：動畫開始時速度慢，后速度沿曲綫值加快，再沿曲綫值放慢

ease-in-out：動畫開始時速度慢，后速度沿曲綫值加快，再沿曲綫值放慢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        @-webkit-keyframes fadein{
            0%{opacity:0;background-color:White;}
            100%{opacity:1;background-color:White;}
        }
        body{
            -webkit-animation-name:fadein;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            /* 設置動畫播放次數，infinite為不停的循環播放 */
            -webkit-animation-iteration-count:1;
        }
        </style>
    </head>
    <body>
        網頁淡入淡出效果
    </body>
</html>