CSS動畫知識總結

Helllo你們好！我是Cathy海希。今天我想跟你們聊一下CSS動畫的相關知識。快跟我來一塊兒來查漏補缺吧！

瀏覽器渲染原理

這個話題呢，推薦你們有時間的話能夠去讀讀Google團隊寫的文章，由於人家就是作瀏覽器的呀。還有比作瀏覽器更加了解瀏覽器的嗎？我在這裏爲你們簡單總結一下。

首先咱們得明確兩個概念👇

• HTML文檔會生成DOM 樹🌲
• CSS文檔會生成 CSSOM 樹🌲

Get到了嗎？那麼瀏覽器就要開始渲染咯～

1. DOM樹和CSSOM樹會合並後造成渲染樹。
2. 根據渲染樹來Layout佈局（文檔流、盒模型、計算大小和位置）；
3. Paint繪製（把邊框顏色、文字顏色、陰影等畫出來）；
4. Composite合成（根據層疊關係展現畫面）。

歸納地來講是有以上四大步驟，而每一個步驟呢，都有不少操做能夠作，以達到優化瀏覽器渲染的目的，在此就很少贅言了。感興趣的朋友們能夠去Google的官網閱讀相關文檔哦😊

CSS 動畫的兩種作法

What😳？CSS居然能夠作動畫？跟我同樣的小白朋友們是否是有一種活見久的感受？ 沒錯，CSS確確實實能夠作動畫，並且操做還挺簡單的！總共有兩種方式，分別是

• transition

  transition的中文意思是過渡，它的做用是用於補充中間幀。 既然有中間，那麼就意味着要有起始。沒錯，在使用transition的時候必需要有起始。簡單來講就是通常只有一次動畫，或者兩次。好比說hover和非hover狀態的過渡。

  #heart{
  transition: all 1s;
  }
  複製代碼

  transition內部的語法，它能夠添加不少內容，好比：屬性名（用all能夠表明全部屬性）｜時長｜過渡方式｜延遲等，用逗號分隔兩個不一樣的屬性。你們在有須要用的時候去查閱MDN文檔就好📖

• animation animation是動畫的意思，咱們能夠製做關鍵幀來達到動畫的效果。

  1. 首先用@keyframes來聲明關鍵幀heart1；

  @keyframes heart1 {
    0% {
      transform: scale(1.0);
    }
    100% {
      transform: scale(1.2);
    }
  複製代碼

  2. 聲明完以後呢，把關鍵幀名heart1掛到你想要添加動畫的選擇器裏就行了，使用animation屬性。

  #heart1 {
  animation: heart1 500ms infinite alternate;
  複製代碼

  animation內部的語法，它能夠添加不少內容，好比：時長｜過渡方法｜延遲｜次數｜方向｜填充模式｜等等...一樣地有須要時記得查閱MDN文檔哦😊

CSS學習心得

CSS學到如今，算是稍微告一段落了。CSS是一門不正交的科學，因此不少地方不能用常理進行推斷。咱們能作的就是在不斷地試驗中去發現新的知識。

那麼咱們就很快再見咯！See you next time👋