Mozilla如何創建這種動畫效果？

在Firefox 42的發行說明中，Mozilla具有不使用Javascript，不使用CSS動畫，不使用視頻或插件，也不使用動畫gif的動畫效果。請參閱this page觀察效果。盾牌右下角有一個機器人，每隔幾秒就會閃爍一次。它在div類的元素critter bottom-rightMozilla如何創建這種動畫效果？

這種效應是如何完成的？

編輯：我錯了;使用CSS動畫;他們只是不出現在DOM Inspector的Animations選項卡中，但當在包含機器人的div元素中選擇::before::after時，可以在Rules選項卡中看到它們。

來源

2015-11-04 BeetleJuice

右鍵單擊該區域，「檢查元素「

裏面<div class="shield-container></div>你可以看到下面的CSS動畫

見的調試工具的CSS部分，看看有什麼CSS確實存在。

來源

2015-11-04 08:44:49

你如何進入調試工具的CSS部分？我看到上面發佈的同樣的東西，但是當我在控制檯中選擇動畫選項卡時，沒有動畫：[我的屏幕截圖]（http://snag.gy/X7xA4.jpg） – BeetleJuice

選擇':: before'或':: after'。 CSS在規則中列出。我會更新我的答案。 –

啊，有道理。當我在動畫選項卡中沒有看到任何內容時，即使禁用了JavaScript並且沒有視頻標籤，它也能正常工作，我認爲這很神奇。謝謝。 – BeetleJuice

這對前：僞元素使用CSS動畫。

#tracking-protection-animation .critter.bottom-right::before { 
    position: absolute; 
    top: 20px; 
    right: 52px; 
    width: 32px; 
    height: 32px; 
    background-image: url("/media/img/firefox/tracking-protection/sheild-animation/eye-lid-bottom-right.070dfe3825e1.png"); 
    opacity: 0; 
    content: ""; 
    animation: 6s linear 0s normal none infinite running blink; 
} 
@keyframes blink{ 
    0%{ 
     opacity:0 
    } 

    40%{ 
     opacity:0 
    } 

    41%{ 
     opacity:1 
    } 

    42%{ 
     opacity:1 
    } 

    43%{ 
     opacity:0 
    } 

    75%{ 
     opacity:0 
    } 

    76%{ 
     opacity:1 
    } 

    77%{ 
     opacity:1 
    } 

    78%{ 
     opacity:0 
    } 

    100%{ 
     opacity:0 
    }

來源

2015-11-04 08:40:09 jono

你在哪裏找到動畫？在Inspector中，當我將鼠標懸停在div上時，我沒有看到任何內容：[截圖]（http://snag.gy/X7xA4.jpg） – BeetleJuice

它使用CSS動畫。您可以在DOM檢查器中看到動畫規則。

來源

2015-11-04 08:40:19 Quentin

我可能需要學習如何使用Inspector。我檢查了它，並沒有顯示任何動畫。看我的[截圖]（http://snag.gy/X7xA4.jpg）。你是如何獲得這個截圖的？ – BeetleJuice

我在DOM檢查器中點擊了正確的東西。看看它中的選擇器。它以':: after'結尾。你在元素選擇器窗格中的行數太高。 – Quentin

選擇':: before'或':: after'對我來說沒有什麼不同。 [見？]（http://snag.gy/rQiRu.jpg）。這就是爲什麼我原本以爲CSS動畫沒有被使用的原因 – BeetleJuice

這裏是CSS和標記重現例如：

http://jsfiddle.net/ren8tx55/

<div id="tracking-protection-animation"> 
    <div class="shield-container"> 
     <div class="critter top-left"></div> 
    </div> 
</div>

CSS

#tracking-protection-animation .shield-container { 
    position: relative; 
    z-index: 0; 
} 

#tracking-protection-animation .critter.top-left::before { 
    animation: 7s linear 0s normal none infinite running blink; 
    background-image: url("https://mozorg.cdn.mozilla.net/media/img/firefox/tracking-protection/sheild-animation/eye-lid-top-right.8fb9f328fa1f.png"); 
    content: ""; 
    height: 48px; 
    left: 45px; 
    opacity: 0; 
    position: absolute; 
    top: 56px; 
    width: 48px; 
} 
#tracking-protection-animation .critter.top-left::after { 
    animation: 10s linear 0s normal none infinite running recorder; 
    background-color: #ff397e; 
    border-radius: 100%; 
    content: ""; 
    height: 8px; 
    left: 24px; 
    opacity: 0; 
    position: absolute; 
    top: 76px; 
    width: 8px; 
} 
#tracking-protection-animation .critter.top-left { 
    background-image: url("https://mozorg.cdn.mozilla.net//media/img/firefox/tracking-protection/sheild-animation/critter-top-left.e4cd620eeb90.png"); 
    height: 129px; 
    left: 0; 
    top: 0; 
    width: 122px; 
} 
#tracking-protection-animation .critter { 
    background-position: left top; 
    background-repeat: no-repeat; 
    position: absolute; 
    z-index: -1; 
} 

@keyframes recorder { 
0% { 
    opacity: 0; 
} 
20% { 
    opacity: 0; 
} 
21% { 
    opacity: 1; 
} 
80% { 
    opacity: 1; 
} 
81% { 
    opacity: 0; 
} 
100% { 
    opacity: 0; 
} 
} 
@keyframes blink { 
0% { 
    opacity: 0; 
} 
40% { 
    opacity: 0; 
} 
41% { 
    opacity: 1; 
} 
42% { 
    opacity: 1; 
} 
43% { 
    opacity: 0; 
} 
75% { 
    opacity: 0; 
} 
76% { 
    opacity: 1; 
} 
77% { 
    opacity: 1; 
} 
78% { 
    opacity: 0; 
} 
100% { 
    opacity: 0; 
} 
}

來源

2015-11-04 08:42:39 janhartmann

Mozilla如何創建這種動畫效果？

回答

相關問題