css3動畫功能介紹

本文轉載自查看原文 2015-03-01 11:12 1533 css3動畫功能介紹/ CSS3

一：過渡動畫---Transitions

含義：在css3中，Transitions功能通過將元素的某個屬性從一個屬性值在指定的時間內平滑過渡到另一個屬性值來實現動畫功能。

Transitions屬性的使用方法如下所示：

transition: property | duration | timing-function | delay

transition-property: 表示對那個屬性進行平滑過渡。

transition-duration: 表示在多長時間內完成屬性值的平滑過渡。

transition-timing-function 表示通過什么方法來進行平滑過渡。

transition-delay: 定義過渡動畫延遲的時間。

瀏覽器支持程度：IE10，firefox4+，opera10+，safari3+及chrome8+

下面是transitions過渡功能的demo如下：

HTML代碼如下：

<div class="transitions">transitions過渡功能</div>

CSS代碼如下：

.transitions {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
        
    -moz-transition-property: background-color;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: linear;

    -o-transition-property: background-color;
    -o-transition-duration: 1s;
    -o-transition-timing-function: linear;
} 
.transitions:hover {
　　background-color: #00ffff;
}

demo效果演示如下：

transitions過渡功能演示--- 鼠標移上來即可看到效果！！

上面的，有時候我們為了書寫方便，可以簡寫如下寫法：

 .transitions {
    -webkit-transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
 }
.transitions:hover {
    background-color: #00ffff;
}

如果想要過渡多個屬性，可以使用逗號分割，如下代碼：

div { -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;}

2. 我們可以使用Transitions功能同時平滑過渡多個屬性值。

如下HTML代碼：

<h2>transitions平滑過渡多個屬性值</h2>
<div class="transitions2">transitions平滑過渡多個屬性值</div>

CSS代碼如下：

.transitions2 {
    background-color:#ffff00;
    color:#000000;
    width:300px;

    -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
    -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
    -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
.transitions2:hover {
    background-color: #003366;
    color: #ffffff;
    width:400px;
}

demo演示如下：

transitions平滑過渡多個屬性值

二：Transform功能：

Transform的含義是：改變，使…變形，轉換的意思。

語法：none|<transform-function>[<transform-function>]* 初始值是none。

Transform-function 的取值如下：

matrix() 定義距陣變換。基本上很少使用。
translate() 移動元素對象。
scale() 縮放元素對象。
rotate() 旋轉元素對象。
skew() 傾斜元素對象。

下面我們來分解 2~5中的各個屬性的使用吧！如下：

一：transform:rotate()

含義是旋轉，其中的deg是度的意思，如”10deg”表示10度的意思。

如下HTML代碼：

<h2>transform屬性-rotate旋轉的demo</h2>
<div class="rotate">
    <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/>
</div>

CSS代碼如下：

.rotate img {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transition:1s all linear;
}
.rotate {width:520px;height:280px;overflow:hidden;}
.rotate img:hover {-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg)}

demo演示如下：

transform屬性-rotate旋轉的demo

二：transform:skew(); 含義傾斜的意思。如下偏斜20度的demo

HTML代碼如下：

<h2>transform屬性-skew傾斜的demo</h2>
<div class="skew">
    <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/>
</div>

CSS代碼如下：

.skew img {
    -webkit-transform:skew(0deg);
    -moz-transform:skew(0deg);
    -o-transform:skew(0deg);
    transition:1s all linear;
}
.skew {width:520px;height:280px;overflow:hidden;}
.skew img:hover {-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg)}

demo演示如下：

transform屬性-skew傾斜的demo

三：transform:scale();

含義：比如“1.5”表示以1.5的比例放大，-1.5 表示以1.5的比例縮小。

如：-webkit-transform:scale(1.5); 在chrome或者safari瀏覽器下放大1.5倍。

HTML代碼如下：

<h2>transform屬性-scale縮放的demo</h2>
    <ul class="transform">
        <li>
            <img src="http://m3.img.srcdd.com/farm4/d/2015/0228/22/291A00ACAACA473D6EE206F118EB473C_B500_900_110_110.jpeg"/>
        </li>
        <li>
            <img src="http://m2.img.srcdd.com/farm5/d/2015/0228/22/2990B0DA0492FBEC9D71FCA00ACE814A_B500_900_110_110.jpeg"/>
        </li>
        <li>
            <img src="http://m2.img.srcdd.com/farm4/d/2015/0228/22/61DB5F16DAD802B61F976BE1FE09A4E9_B500_900_110_110.jpeg"/>
        </li>
        <li>
            <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/3AE45F87A04F6F2C0B688F6C844F52CE_B500_900_110_93.jpeg"/>
        </li>
    </ul>

CSS代碼如下：

ul,li{list-style:none;}
.transform{ width:205px; margin:100px auto;overflow: hidden;padding: 50px;}
.transform li{ border-radius: 4px;background: #fff;width:45px; height:45px;margin:3px; float:left; transition:.1s all ease;}

.transform li img{border-radius: 4px;height: 43px;width: 43px;border: 1px solid #fff;cursor: pointer;}

.transform li:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);}

demo演示如下：

transform屬性-scale縮放的demo

四：transform:translate();

含義：變動，位移

如：-webkit-transform:translate(120px,0); 表示向右位移120px，向上位移0px；向左向下位移則為負 “-”，如下demo

HTML代碼如下：

<h2>transform屬性-translate變動位移的demo</h2>
<div class="translate">
        <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/>
</div>

CSS代碼如下：

.translate img {
    -webkit-transform:translate(0,0);
    -moz-transform:translate(0,0);
    -o-transform:translate(0,0);
    transition:1s all linear;
}
.translate {width:520px;height:280px;overflow:hidden;}
.translate img:hover {-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0);-o-transform:translate(120px,0)}

demo演示如下：

transform屬性-translate變動位移的demo

三：Animations功能；

Animations功能與Transitions功能相同，都是通過改變元素的屬性值來實現動畫效果的。它們的區別在於：使用Transitions功能是只能通過指定屬性的開始值與結束值。然后在這兩個屬性值之間進行平滑過渡的方式來實現動畫效果，因此不能實現復雜的動畫效果；而Animations則通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現更為復雜的動畫效果。

用法：@-webkit-keyframes 關鍵幀的集合名 {創建關鍵幀的代碼}

如下面的代碼：

@-webkit-keyframes mycolor {

0% {background-color:red;}

40% {background-color:darkblue;}

70% {background-color: yellow;}

100% {background-color:red;}

}

.animate:hover {

-webkit-animation-name: mycolor;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function:linear;

}

如上：-webkit-animation-name屬性中指定關鍵幀集合的名稱，

-webkit-animation-duration屬性指定完成整個動畫所需要完成的時間，timing-function 值實現動畫的方法。

可以看如下demo

HTML代碼如下：

<h2>使用animate實現更為復雜的動畫</h2>
<div class="animate">使用animate實現更為復雜的動畫</div>

CSS代碼如下：

.animate {background-color:red;height:100px;}
    
@-webkit-keyframes mycolor {
    0% {background-color:red;}
    40% {background-color:darkblue;}
    70% {background-color: yellow;}
    100% {background-color:red;}
}
@-moz-keyframes mycolor {
    0% {background-color:red;}
    40% {background-color:darkblue;}
    70% {background-color: yellow;}
    100% {background-color:red;}
}
    
.animate:hover {
    -webkit-animation-name: mycolor;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function:linear;

    -moz-animation-name: mycolor;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function:linear;
}

demo演示如下：

使用animate實現更為復雜的動畫

如上就可以實現在chrome，firefox，safari及opera瀏覽下上的效果了；

注意：在opera中寫如下css代碼是不生效的；如下：

.animate:hover {

       -o-animation-name: mycolor;

       -o-animation-duration: 5s;

       -o-animation-timing-function:linear;

 }

 @-o-keyframes mycolor {

      0% {background-color:red;}

      40% {background-color:darkblue;}

      70% {background-color: yellow;}

      100% {background-color:red;}

 }

實現動畫的方法如下：

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

ease-in 在動畫開始時候速度很慢，然后速度沿曲線值進行加快。

ease-out 在動畫開始時速度很快，然后速度沿曲線值進行放慢。

ease 動畫開始時速度很慢，然后速度沿曲線值進行加快，然后再沿曲線值放慢。

ease-in-out 動畫開始時速度很慢，然后速度沿曲線值進行加快，然后再沿曲線值放慢

下面我們繼續使用 animate實現多個屬性值同時改變的動畫 demo如下：

HTML代碼如下：

<h2>使用animate實現多個屬性值同時改變的動畫</h2>
<div class="animate2">使用animate實現多個屬性值同時改變的動畫</div>

CSS代碼如下：

.animate2 {
    background-color:yellow;
    width:500px;
    height:100px;
}
@-moz-keyframes mycolor2 {
    0% {
        background-color: red;
        -moz-transform: rotate(0deg);
    }
    40% {
        background-color: darkblue;
        -moz-transform: rotate(30deg);
    }
    70% {
        background-color: yellow;
        -moz-transform: rotate(-30deg);
    }
    100% {
        background-color: red;
        -moz-transform: rotate(0deg);
    }
}
@-webkit-keyframes mycolor2{
    0% {
        background-color: red;
        -webkit-transform: rotate(0deg);
    }
    40% {
        background-color: darkblue;
        -webkit-transform: rotate(30deg);
    }
    70% {
        background-color: yellow;
        -webkit-transform: rotate(-30deg);
    }
    100% {
        background-color: red;
        -webkit-transform: rotate(0deg);
    }
}
.animate2:hover {
    -webkit-animation-name: mycolor2;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function: linear;

    /* 無限循環旋轉 當count為整數時候，那么就旋轉的次數就等於該整數值*/
    -webkit-animation-iteration-count:infinite;

    -moz-animation-name: mycolor2;
    -moz-animation-duration:5s;
    -moz-animation-timing-function: linear;

    /* 無限循環旋轉 當count為整數時候，那么就旋轉的次數就等於該整數值*/
    -moz-animation-iteration-count:infinite;
}

demo演示如下：

使用animate實現多個屬性值同時改變的動畫

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3的過渡和動畫的屬性介紹 CSS3動畫事件 CSS3動畫箭頭 CSS3動畫特效 CSS3(4)---動畫(animation) css3的幀動畫 css3 翻牌動畫如何停止CSS3的動畫？ CSS3 循環動畫 CSS3動畫