How does Mozilla create this animated effect?

Question

On its release notes to Firefox 42, Mozilla has an animation effect that uses no Javascript, no CSS animation, no video or plug-in, and no animated gif.

Please refer to this page to observe the effect. There is a robot at the bottom right corner of the shield that blinks every few seconds. It is in a div element of class critter bottom-right

How is this effect done?

EDIT: I was mistaken; CSS animations are used; they just don't show up in the Animations tab of the DOM Inspector but they can be seen in the Rules tab when ::before ::after is selected within the div element containing the robot.

Answer 1

It uses CSS animation. You can see the animation rule in the DOM inspector.

Answer 2

Right click on the area and "Inspect Element"

Inside <div class="shield-container></div> you can see the following css animation

See the CSS section of the debug tools to see what css does there.

Answer 3

This uses CSS animation on the :before pseudo element.

#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

Here is the CSS and mark-up to reproduce the example:

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;
}
}