CSS3基礎知識核心動畫（二）

時間 2019-12-12

標籤 css3 css 基礎知識核心動畫欄目 CSS 简体版

原文原文鏈接

Transition過渡

transition-property 過渡屬性 all|[attr]
transition-duration 過渡時間
transition-delay 延遲時間
transition-timing-function 運動類型html

ease：（逐漸變慢）默認值
linear：（勻速）
ease-in：(加速)
ease-out：（減速）
ease-in-out：（先加速後減速）
cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ）貝塞爾曲線

webkit內核下：
ele.addEventListener('webkitTransitionEnd',function(){},false);
標準瀏覽器下:
ele.addEventListener(‘transitionend',function(){},false)
transition 執行次數問題web

2D變換

transform瀏覽器

rotate() 旋轉函數緩存

deg 度數
Transform-origin 旋轉的基點

skew() 傾斜函數函數

skewX()
skewY()

scale() 縮放函數默認值是1動畫

scaleX()
scaleY()

translate() 位移函數3d

translateX()
translateY()

animation聲明關鍵幀動畫

關鍵幀---@keyframescode

相似於flash
定義動畫在每一個階段的樣式，即幀動畫
關鍵幀的時間單位
數字：0%、25%、100%等（設置某個時間段內的任意時間點的樣式）
字符：from（0%）、to（100%）
格式

@keyframes 動畫名稱
    {
         動畫狀態
    }

animation調用動畫

必要屬性

animation-name 動畫名稱（關鍵幀名稱）
animation-duration 動畫執行時間
可選屬性
animation-timing-function
linear 勻速
ease 緩存
ease-in 加速
ease-out 減速
ease-in-out 先加速後減速
cubic-bezier(number, number, number, number)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

可選屬性

animation-delay 動畫延遲
animation-iteration-count 重複次數
animation-direction 動畫運行的方向 normal | reverse | alternate | alternate-reverse
animation-play-state 動畫狀態 running | paused
animation-fill-mode 動畫結束後的狀態 none | forwards| backwards | both

3D變換

transform-style : flat | preserve-3d (3D空間展現)orm

perspective 透視效果
transform:perspective(800px) 直接做用在子元素上
perspective-origin 透視點位置
transform 新增函數htm

translate3d( tx , ty, tz )
translateX() translateY() translateZ()
rotate3d( rx , ry , rz，a)
rotateX() rotateY() rotateZ()
scale3d( sx , sy , sz)
scaleX() scaleY() scaleZ()

動畫進階

【timing-function  steps (<number_of_steps>，`<direction>`)】

steps()是一個timing function，容許咱們將動畫或者過渡分割成段，而不是從一種狀態持續到另外一種狀態的過渡。這個函數有兩個參數;

第一個參數是一個正值，指定咱們但願動畫分割的段數;
第二個參數定義了這個要點在咱們的@keyframes中申明的動做將會發生的關鍵,這個值是可選的，在沒有傳遞參數時，默認爲」end」;

【」start」】表示一個左--持續函數，在動畫開始時，動畫的第一段將會立刻完成。以左側端點爲起點，當即跳到第一個step的結尾處。它會當即跳到第一段的結束而且保持這樣的狀態直到第一步的持續時間結束。後面的每一幀都將按照此模式來完成動畫；

【」end」】表示一個右--持續函數。動畫執行時，在每一幀裏，動畫保持當前狀態直到這一段的持續時間完成，纔會跳到下一步的起點，後面的每一幀都按照這個模式來進行，在最後一幀的起點，等到這一幀的持續時間結束，整個動畫的執行也已經結束，執行動畫的元素來不及跳到這一幀的終點，直接回到了整個動畫起點，開始了第二次動畫。每一個選擇本質上從一個不一樣的面移動這個元素而且將產生一個不一樣的位置在這個相同的動畫裏；

【Sprites 精靈動畫】

原理：使用一張含有多幀靜態畫面的圖片，經過切換 background-position 使其變爲連續的動畫

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box1 {
        width: 100px;
        height: 100px;
        line-height:100px;
        text-align: center;
        margin:20px 0;
        font-size:20px;
        color:#fff;
        -webkit-animation: animation1 6s steps(3, start) infinite;
    }
    .box2 {
        width: 100px;
        height: 100px;
        line-height:100px;
        text-align: center;
        margin:20px 0;
        font-size:20px;
        color:#fff;
        -webkit-animation: animation2 6s steps(3, end) infinite;
    }
    @-webkit-keyframes animation1{
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }
    @keyframes animation1{
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }
    @-webkit-keyframes animation2{
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }
    @keyframes animation2{
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }
</style>
<body>
<div class="box1">start</div>
<div class="box2">end</div>
</body>
</html>

相關標籤/搜索

每日一句

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