css動畫 --- transition

leoperfect 發布于2019-08-22 14:02 / 3204人閱讀

摘要：初探提供了一種在更改屬性時控制動畫速度的方法。其可以讓屬性變化成為一個持續一段時間的過程，而不是立即生效的。軸的取值范圍區間內軸可以任意值。動手使用下基本操作的里有，要觸發它，則需要改變上面所說的。

前言

頁面效果是很重要的一環，好的頁面效果，可以讓用戶感覺很舒服，進而能吸引更多的用戶。
既然是頁面效果，那么動畫肯定不可或缺，那么這篇先說下 transition 這個 css3 屬性。

初探 transition

transitions 提供了一種在更改 CSS 屬性時控制動畫速度的方法。其可以讓屬性變化成為一個持續一段時間的過程，而不是立即生效  的。（摘自MDN）

用法

其寫法（為了兼容，要加廠商前綴，這里不寫咯）：

transition:

也可以用逗號隔開，多寫幾個作用于不用的 property（屬性）

transition:    ,

各項作用

@	值	默認值	作用
property	none / all / property	all	作用于需要過渡的屬性
duration	time	0	過渡所需時間
timing-function	linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier(n,n,n,n)	ease	規定過渡效果的速度曲線
delay	time (同duration)	0	延遲多久才開始過渡

property：可過渡的 CSS 屬性，有些屬性則不行。

time：以秒（如1s）或毫秒（如1000）計。

cubic-bezier(x1,y1,x2,y2)：三階貝塞爾曲線。linear ，ease 等等都是由它計算出來的。x軸的取值范圍：[0,1] 區間內, y軸可以任意值。可在線自定義。

動手使用下 基本操作

// css
#box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
}

#box:hover {
  width: 500px;
  margin-top: 100px;
}

// html

#box的 style 里有transition，要觸發它，則需要改變上面所說的 property 。

當鼠標移到 div 時，width 和 marin-top 發生了變化，觸發了 transition 。

all ：所有可過渡的屬性都可以的意思。

1s ：在第二項，即 duration 。過渡所需時間。

簡單的類似圖片無縫滑動

// css
* {
  margin: 0;
  padding: 0;
}

#box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  overflow: hidden;
  
}

#img_container {
  position: relative;
  width: 400px;
  transition: all .7s linear;
  -webkit-transition: all .7s linear;
  -moz-transition: all .7s linear;
  -ms-transition: all .7s linear;
  -o-transition: all .7s linear;
}

#img_container span {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: yellow;
}

#img_container span:nth-of-type(even) {
  background-color: red;
}

ul {
  text-align: center;
}

li {
  padding: 10px;
  cursor: pointer;
  list-style: none;
  display: inline-block;
}

// html

  
     1234
  


  圖一
  圖二
  圖三
  圖四


// js
~function () {
    let lis    = document.getElementsByTagName("li");
    let imgBox = document.getElementById("img_container");
    let width  = +document.querySelector("span").clientWidth;
    
    for (let j = 0;j < lis.length;j++) {
      
      lis[j].addEventListener("click",function() {
        imgBox.style.marginLeft = `-${ width * j }px`;
      });

    }

}()

這個 demo 是用 js 改變了 property ，從而觸發 transition。

滾動到某個位置，動畫才出現

// css
* {
  margin: 0;
  padding: 0;
}

body {
  height: 1500px;
}


#box {
  height: 1200px;
  text-align: center;
}

#animation {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -webkit-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -moz-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -ms-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -o-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
}

// html

  請往下滾動到有動畫的地方，或者點擊 這里




// js 
let animation = function () {
    let animationBox = document.getElementById("animation");

    function show () {
      animationBox.style.transform = "translateX(600px) scale(3,3) rotate(360deg)";
    }

    function init () {
      animationBox.style.transform = "translateX(0) scale(1,1) rotate(-360deg)";
    }

    return { show, init };
  }()

  window.onscroll = function () {
    let scrollTop = +window.scrollY;

    if (scrollTop > 650) {
      animation.show();
    } else {
      animation.init();
    }
  }

因為主要演示動畫，所以沒寫滾動的節流或防抖了。

當滾動或點擊到動畫的位置，動畫才開始。

在 css 代碼可以看到，transition 要通過 transform 的變化來觸發。同時我也用到了 cubic-bezier 。

最后

這里不深入講解 cubic-bezier ，因為我看原理也是頭暈。。。。
transition 還可以實現很多功能，淡出淡入 ， 手風琴效果 等等。等著你們去發現。
其實動畫不是特別難的，只要你有顆騷動（好奇）的心。

云服務器 GPU云服務器 css3動畫高性能css3動畫 -transition transit

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92797.html

CSS 動畫

摘要：相關的事件事件會在動畫結束的時候觸發。事件觸發時會傳入一些動畫相關的參數，例如，，詳細內容可以參考。動畫的一個方向控制。即動畫效果執行后，元素便恢復正常狀態。有趣的是，支持小數，即表示動畫執行到一半。 CSS 中的 transform，transition 和 animation 是分開的三部分內容，其中 transfrom 主要是控制元素變形，并沒有一個時間控制的概念，而 trans...

沈儉 2019-08-29 11:10 評論0 收藏0
css3動畫屬性詳解之transform、transition、animation

摘要：動畫屬性詳解關于制作動畫的幾個屬性變形轉換和動畫。一屬性旋轉中心為原點扭曲傾斜縮放移動矩陣變形。各個屬性的用法旋轉其中表示度。承載動畫的另一個屬性。定義動畫的名稱。一個或多個合法的樣式屬性。 css3動畫屬性詳解：關于CSS3制作動畫的幾個屬性：變形(transform)、轉換(transition)和動畫(animation)。一、transform 屬性：旋轉rotate（中...

Riddler 2019-08-30 12:46 評論0 收藏0
CSS3動畫效果transition

摘要：鼠標移動觸發的動畫效果。第二個參數就是動畫耗時，默認是，所以必不可少，要不然沒有動畫效果，沒什么可說的。多個樣式各個樣式用逗號隔開即可寬度完成變化，高度延遲執行，完成變化，背景色完成變化效果如下未完待續1.transition的瀏覽器支持情況 IE10+支持，IE6789都不支持！目前，其他瀏覽器最新版本都支持，不需要再加前綴-webkit- 之類的了 2. 還是一步一步說說怎么用trans...

番茄西紅柿 2019-04-23 11:57 評論0 收藏0
面試官: css3動畫了解嗎? 我: .......

摘要：過渡允許的屬性值在一定的時間區間內平滑地過渡。需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。需要事件觸發，所以沒法在網頁加載時自動發生。是一次性的，不能重復發生，除非一再觸發。 transition(過渡) transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0
面試官: css3動畫了解嗎? 我: .......

摘要：過渡允許的屬性值在一定的時間區間內平滑地過渡。需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。需要事件觸發，所以沒法在網頁加載時自動發生。是一次性的，不能重復發生，除非一再觸發。 transition(過渡) transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值...

weakish 2019-05-23 11:49 評論0 收藏0
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0