面試官: css3動畫了解嗎? 我: .......

時間 2019-11-29

標籤面試 css3 css 動畫瞭解欄目快樂工作简体版

原文原文鏈接

transition(過渡)

transition容許css的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值javascript

transition主要包含四個屬性值：css

執行變換的屬性：transition-property，html

變換延續的時間：transition-duration，java

在延續時間段，變換的速率變化：transition-timing-function，瀏覽器

變換延遲時間：transition-delay。dom

<div class="box"></div>
<style> .box { width: 100px; height: 100px; background: cornsilk; margin: 200px auto; transition: all 2s ease-in-out; } .box:hover{ width: 200px; height: 200px; } </style>
複製代碼

這裏須要注意一個transition加在.box和.box:hover上的區別學習

.box:直接上圖動畫

.box {
  transition: all 2s ease-in-out;
}
複製代碼

.box:hover直接上圖(只在鼠標放上時有效果,離開時沒有效果)

.box:hover {
    transition: all 2s ease-in-out;
}
複製代碼

注意事項

不是全部的CSS屬性都支持transition。
transition須要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。好比，height從0px變化到100px，transition能夠算出中間狀態。可是，transition無法算出0px到auto的中間狀態，也就是說，若是開始或結束的設置是height: auto，那麼就不會產生動畫效果。
transition須要事件觸發，因此無法在網頁加載時自動發生。
transition是一次性的，不能重複發生，除非一再觸發。

animation

值	描述
name	用來調用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致
duration	指定元素播放動畫所持續的時間
timing-function	規定速度效果的速度曲線，是針對每個小動畫所在時間範圍的變換速率
delay	定義在瀏覽器開始執行動畫以前等待的時間，值整個animation執行以前等待的時間
iteration-count	定義動畫的播放次數，可選具體次數或者無限(infinite)
direction	設置動畫播放方向：normal(按時間軸順序),reverse(時間軸反方向運行),alternate(輪流，即來回往復進行),alternate-reverse(動畫先反運行再正方向運行，並持續交替運行)
play-state	控制元素動畫的播放狀態，經過此來控制動畫的暫停和繼續，兩個值：running(繼續)，paused(暫停)
fill-mode	控制動畫結束後，元素的樣式，有四個值：none(回到動畫沒開始時的狀態)，forwards(動畫結束後動畫停留在結束狀態)，backwords(動畫回到第一幀的狀態)，both(根據animation-direction輪流應用forwards和backwards規則)，注意與iteration-count不要衝突(動畫執行無限次)

name 用來調用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致ui

transform

transform就是變形，主要包括旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。spa

dom上的動畫方法

以前學習的時候，看到animate方法就想到了jQuery,習慣了,覺得animate就是屬於jQuery。今天發現不是，至少不是jQuery的專屬品，請看代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="animate-test">animate-test</div>
<script> document.getElementById("animate-test").animate({ transform: ['translateX(0px)', "translateX(100px)"] }, { easing: 'linear', //執行的動畫 duration: 3000, //執行的這個動做須要的時間 iterations: Infinity, //執行的次數 fill: 'forwards', //動畫結束的狀態 direction: 'alternate' //方向 }); </script>
複製代碼