CSS3動畫：transition和animation（一）

時間 2019-11-17

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

原文原文鏈接

一、瀏覽器支持狀況css

transform:html

transition:java

animation:瀏覽器

二、分別介紹他們的用法動畫

transform 屬性向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜，便可以改變元素的形狀。
spa

語法爲transform: none|transform-functions;
具體的方法參見

W3CSchool上的CSS3 transform 屬性介紹

transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：ssr

transition-property 　　 //哪個屬性的變化須要過分動畫
transition-duration //過分動畫持續的事件是多少
transition-timing-function //過分動畫的效果是什麼
transition-delay　　　　　　　　　　//過分動畫是否延時觸發

W3CSchool上的CSS3 transition 屬性介紹

這裏簡單說下實際上使用這兩個屬性作過分動畫時候的方法：3d

　　例1：咱們最常常用的應該是鼠標滑到元素之上的時候，讓元素有一些變化。咱們會設置初始化的時候div的狀態，而後設置div:hover相應的狀態（狀態的改變能夠是普通的屬性，相似於width，height之類的，但今天說的是transform，因此特指變形），這兩個狀態之間，咱們想用過分動畫的形式，讓他們呈現出一種動畫的效果。那麼怎麼使用過分屬性transition呢。一開始，我將這個屬性給了div:hover，這樣設置獲得一個很奇怪的效果，那就是鼠標放上去的時候，能夠按照設定的transition方法進行過分，可是鼠標移開的時候，倒是直接變回來初始化狀態，中間並沒有過分。爲何會這樣呢。先分析下選擇器，div和div:hover同時選擇的是div元素，只不過div:hover只是選擇了div中的一種狀態而已。那麼，div:hover中的transform屬性在鼠標滑到div元素之上的時候會被加到div元素中，這時候div元素狀態的改變，就會以transition中的設置進行了。而當鼠標移出div元素的時候，除了會講狀態設置到初始化時候的狀態，也會移除transition中設置的效果，從而致使移出動畫並無過分效果。code

例2：一樣的，若是是用javaScript經過事件綁定，在鼠標滑到元素之上的時候加上一個改變狀態的class,也是必需要在元素的初始化狀態下設置transition的方法。纔會在無論是在改變狀態以前仍是以後都有過分的效果。orm

經過上面的例子不難看出，元素狀態的改變，好比說width,height,transform...其實就是過分動畫的第一幀和最後一幀。而經過對元素設置transition屬性，也就是設置了首尾兩幀之間的過分。

附上最基礎的動畫代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{position: relative;}
        .donghua{transition: all .3s linear;width: 200px;background-color: #555;color: #fff;height: 100px;position: absolute;top: 88px;left: 123px;}
        .donghua:hover{width: 300px;transform: scale(1.2,1.3);}
    </style>
</head>
<body>
    <div class="donghua">CSS3動畫演示</div>
</body>
</html>

鼠標移進和移出div都會看到帶過渡效果的動畫。

【本文··完】

相關標籤/搜索

每日一句

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