Question

在Firefox 42的发行说明中，Mozilla有一个动画效果，它不使用Javascript，没有CSS动画，没有视频或插件，也没有动画gif。

请参阅this page观察效果。盾牌右下角有一个机器人，每隔几秒闪烁一次。它位于类div

的critter bottom-right元素中

这种效果是如何完成的？

编辑：我错了;使用CSS动画;它们只是不会显示在DOM检查器的Animations标签中，但在div中选择Rules ::before时，可以在::after标签中看到它们包含机器人的元素。

Answer 1

它使用CSS动画。您可以在DOM检查器中看到动画规则。

Answer 2

右键单击该区域并“检查元素”

在<div class="shield-container></div>内你可以看到以下css动画

请参阅调试工具的CSS部分，了解css的用途。

Answer 3

这在：before伪元素上使用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
    }

Answer 4

以下是重现示例的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;
}
}

Mozilla如何创建这种动画效果？

4 个答案: