Develop Reference

How to do animation close as same as open

while click on (?), have opened options with animation effect. Animation is working fine. Want to close the options same as open animation which is options bubble effect, but close animation effect is not same like as open animation. Need closing animation is also same as bubble effect.
Can anyone help me to find the mistake what i did. Thanks.
jQuery(document).ready(function() {
var $body = jQuery('body');
var $cs_fixed_wrapper = jQuery('.cs_fixed_wrapper');
// customer service icon click - ex. (?) click
jQuery('img.cs_trigger_icon').on('click', function(ev) {
ev.stopPropagation();
if(jQuery('.cs_options').hasClass('slide_open')) {
jQuery('.cs_options').removeClass('slide_open').addClass('slide_close');
}
else {
jQuery('.cs_options').removeClass('slide_close').addClass('slide_open');
}
});
var clickEvent = {};
// cs options - trigger functionalities
$body.on('click', '.cs_action_trigger', function(ev) {
ev.stopPropagation();
var window_width = jQuery(window).width();
var data_type = jQuery(this).data('type');
if(window_width < 800) {
if(!clickEvent[data_type]) {
clickEvent = {};
clickEvent[data_type] = 1;
if(data_type == 'contact') {
jQuery('.cs_contact').addClass('cs_contact_opened');
}
else if(data_type == 'supportarticle') {
jQuery('.cs_supportarticle').addClass("cs_supportarticle_opened");
return false;
}
else if(data-type == 'cs_faq') {
jQuery('.cs_faq').addClass("cs_faq_opened");
}
} else if (clickEvent[data_type]) {
clickEvent = {};
clickEvent[data_type] = 1;
if(data_type == 'contact') {
jQuery('.cs_contact_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
else if(data_type == 'tutorial') {
jQuery('.cs_tutorial_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
else if(data_type == 'supportarticle') {
clickEvent = {};
}
else if(data_type == 'cs_faq') {
jQuery('.cs_faq_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
}
} else {
if(data_type == 'contact') {
jQuery('.cs_contact_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.cs_contact_modal .close_btn').fadeIn();
}
else if(data_type == 'supportarticle') {
// console.log(data_type);
}
else if(data_type == 'cs_faq') {
jQuery('.cs_faq_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.cs_faq_modal .close_btn').fadeIn();
}
}
});
// customer service - contact form popup outside close for desktop
jQuery('.cs_contact_modal').on('click', function(ev) {
jQuery(this).removeClass('opened');
$body.removeClass('cs_popup_opened');
// show close icon on multiple popups
show_close_icon();
// body scroll based on condition
body_scroll_for_custom_pages();
contact_form_cf7_empty();
});
jQuery('.cs_contact_modal .modal_profile_wrapper').on('click', function(ev) {
ev.stopPropagation();
});
// customer service - contact form popup close for desktop
jQuery('.cs_contact_modal_close').on('click', function(ev) {
jQuery('.cs_contact_modal').removeClass('opened');
$body.removeClass('cs_popup_opened');
// show close icon on multiple popups
show_close_icon();
// body scroll based on condition
body_scroll_for_custom_pages();
jQuery('.cs_contact').removeClass('cs_contact_opened');
contact_form_cf7_empty();
});
// outside click to close the customer service slide options
jQuery('body').on('click', function() {
jQuery('.cs_options').removeClass('slide_open').addClass('slide_close');
});
});
* {
margin: 0;
padding: 0px;
box-sizing: border-box;
}
body{
background-color: #f7f7f7;
}
.cs_fixed_wrapper {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999999;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
visibility: visible;
opacity: 1;
}
.cs_inner_wrapper {
position: relative;
display: flex;
flex-flow: column-reverse;
align-items: flex-end;
}
.cs_action_trigger.cs_contact_opened {
width: 144px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_contact_opened {
transition: all 0.5s;
}
.slide_open .cs_action_trigger.cs_contact_closed {
transition: all 0.5s;
}
.cs_supportarticle {
margin-bottom: 0px;
border-radius: 30px;
}
.cs_action_trigger.cs_supportarticle_opened {
width: 188px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_supportarticle_opened,
.slide_open .cs_action_trigger.cs_supportarticle_closed {
transition: all 0.5s;
}
.cs_faq {
margin-top: 0px;
}
.slide_open .cs_action_trigger.cs_faq_opened {
width: 102px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_faq_opened,
.slide_open .cs_action_trigger.cs_faq_closed {
transition: all 0.5s;
}
.cs_support_wrapper > img {
position: absolute;
bottom: 0px;
right: 0px;
cursor: pointer;
}
.cs_options {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
position: relative;
bottom: 50px;
opacity: 0;
transition: all .7s;
}
.cs_options.slide_open {
opacity: 1;
transition: transform .2s;
}
.cs_options.slide_close {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: transform 0.4s, visibility .4s, opacity .6s;
}
.cs_contact_icon img,
.cs_supportarticle_icon img,
.cs_faq img {
display: inline-block;
position: relative;
transition: all 0.3s ease-in-out;
}
.cs_supportarticle_opened .cs_supportarticle_icon img {
left: -59px;
}
.cs_contact_opened .cs_contact_icon img {
left: -40px;
}
.cs_faq_opened .cs_faq_icon img {
left: -18px;
}
.slide_open .cs_action_trigger .circle {
animation: bubble .7s 0.5;
}
.slide_close .cs_action_trigger .circle {
transition: all 1s;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 30px;
}
.cs_faq .circle {
background: #ff422d;
}
.cs_supportarticle .circle {
background: #00b44a;
}
.cs_contact .circle {
background: #00387c;
}
.cs_action_trigger {
display: block;
padding: 10px;
width: 50px;
height: 50px;
line-height: normal;
font-size: 0;
border-radius: 100%;
margin: 0 0 10px 0;
transform: scale(.5);
transition: transform .5s, top 0.4s;
position: relative;
pointer-events: none;
cursor: pointer;
white-space: nowrap;
}
.cs_action_trigger:nth-child(1) {
top: 60px;
}
.cs_action_trigger:nth-child(2) {
top: 120px;
}
.cs_action_trigger:nth-child(3) {
top: 180px;
}
.slide_open .cs_action_trigger {
transform: scale(1);
top: 0px;
transition: transform .5s, top .3s;
pointer-events: all;
}
.cs_action_trigger img {
width: 28px;
position: relative;
transition: left 0.3s;
}
.cs_contact img {
top: 6px;
left: 0px;
}
.cs_supportarticle img {
top: 7px;
left: 0px;
}
.cs_faq img {
top: 4px;
left: 0px;
}
#keyframes bubble{
0% {transform: scale(0,0) translateY(0); }
10% { transform: scale(0.5,0.5) translateY(0); }
30% { transform: scale(1.1,1.1) translateY(-20px); }
50% { transform: scale(1.05,1.05) translateY(0); }
57% { transform: scale(1,1) translateY(-7px); }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cs_fixed_wrapper">
<div class="cs_inner_wrapper">
<div class="cs_support_wrapper">
<div class="cs_options slide_close">
<div class="cs_contact cs_action_trigger" data-link="cs_contact_popup" data-type='contact'>
<span class="circle"></span>
<img src="https://i.stack.imgur.com/WusFO.png" alt="C"/>
<span class="cs_content cs_link_content">Contact Us</span>
</div>
<div class="cs_supportarticle cs_action_trigger" data-type='supportarticle'>
<a href="">
<span class="circle"></span>
<img src="https://i.stack.imgur.com/UzkHq.png" alt="S"/>
<span class="cs_content cs_link_content">Support Articles</span>
</a>
</div>
<div class="cs_faq cs_action_trigger" data-link="cs_faq_popup" data-type='cs_faq'>
<span class="circle"></span>
<img src="https://i.stack.imgur.com/VEzHb.png" alt="F"/>
<span class="cs_content cs_link_content">FAQ</span>
</div>
</div>
<img class="cs_trigger_icon" src="https://i.stack.imgur.com/sNQUZ.png" alt="C"/>
</div>
</div>
</div>

Create another set of keyframes say 'unbubble' and do the exact opposite transitions.
#keyframes unbubble{
0% {transform: scale(1,1) translateY(-10px); }
30% { transform: scale(1.1,1.1) translateY(-15px); }
50% { transform: scale(1.05,1.05) translateY(-15px); }
57% { transform: scale(1,1) translateY(-10px); }
64% { transform: scale(0.5,0.5) translateY(0); }
100% { transform: scale(0,0) translateY(0); }
}
and apply this animation in slide_close
.slide_close .cs_action_trigger {
animation: unbubble .7s 0.5;
}
let me know if this works

Starting animation when class toggle

I'm trying to create a mask that slides from top to bottom everytime I click the button that toggle a css class. I tried using css animation but mask doesn't slide when class is removed. I tried css transitions as well and it almost works. However when class is removed, mask slides from bottom to top, not from top to bottom as intended.
How can improve my code snippet to get mask sliding from top to bottom every button click ?
var block = document.querySelectorAll('.block.first')[0],
toggle = document.querySelectorAll('.toggle.anim')[0],
blockSecond = document.querySelectorAll('.block.second')[0],
toggleTrans = document.querySelectorAll('.toggle.trans')[0];
toggle.addEventListener('click', function(e) {
e.preventDefault();
if (block.classList.contains('mask')) {
block.classList.remove('mask');
console.log('remove class');
} else {
block.classList.add('mask');
console.log('add class');
}
});
toggleTrans.addEventListener('click', function(e) {
e.preventDefault();
if (blockSecond.classList.contains('mask')) {
blockSecond.classList.remove('mask');
console.log('remove class');
} else {
blockSecond.classList.add('mask');
console.log('add class');
}
});
.block {
position: relative;
width: 200px;
height: 200px;
background: #ccc;
overflow: hidden;
}
.block span {
visibility: hidden;
transition: visibility 0s linear .3s;
}
.block::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #999;
transform: translate3d(0, -100%, 0);
z-index: 5;
}
.block.mask span {
visibility: visible;
}
/* USING ANIMATION */
.block.first.mask::before {
animation: maskToggle 1s linear 0s forwards;
}
#keyframes maskToggle {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 100%, 0);
}
}
/* USING TRANSITION */
.block.second::before {
transition: transform 1s;
}
.block.second.mask::before {
transform: translate3d(0, 100%, 0);
}
<div class="block first">
<span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span>
</div>
<button class="toggle anim">Animation Toggle</button>
<div class="block second">
<span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span>
</div>
<button class="toggle trans">Transition Toggle</button>

You can do something like this with jQuery:
$('.toggle').click(function() {
$('.block').removeClass('man1');
$('.block').addClass('man');
var clicks = $(this).data('clicks');
if (clicks) {
$('.block').removeClass('man');
$('.block').addClass('man1');
} else {
}
$(this).data("clicks", !clicks);
});
.block {
position: relative;
width: 200px;
height: 200px;
background: #ccc;
overflow: hidden;
}
.block span {
visibility: hidden;
transition: visibility 0s linear .3s;
}
.block::before {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 200px;
height: 200px;
background: #999;
z-index: 5;
transition: all 0.5s ease;
}
.block::after {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 200px;
height: 200px;
background: #999;
z-index: 5;
transition: all 0.5s ease;
}
.block.man::before {
animation: maskToggle 1s linear 0s forwards;
}
.block.man1::after {
animation: maskToggle 1s linear 0s forwards;
}
.block.man span {
visibility: visible;
}
#keyframes maskToggle {
0% {
top: -100%;
}
100% {
top: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block second">
<span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span>
</div>
<button class="toggle trans">Transition Toggle</button>
JSFiddle

Why isn't this :after element working?

I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.
http://www.samnorris.net/portfolio-ss/
The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.
is my CSS incorrect, or something else...?
Here is the Codepen which shows the animation that should be displaying:
http://codepen.io/devilishalchemist/pen/emOVYQ
HTML:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS from my page:
/* ==========================================================================
PAGE LOADER
========================================================================== */
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
#windowloader {
&:after {
content: '';
display: block;
position: absolute;
z-index: 999999;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
animation: loader 1.2s infinite ease-in-out;
span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #EE4040;
animation: loaderBlock 1.2s infinite ease-in-out both;
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(3) {
bottom: 0;
left: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
/*LOAD FINISH*/
.loaded {
top: -100%;
}
}
}
#keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
#keyframes loaderBlock {
0%, 30% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(90deg);
}
}
#keyframes loaderBlockInverse {
0%, 20% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(-90deg);
}
}
FWIW, I have also tried:
#windowloader:after { }
Javascript:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});

Bah, nevermind - I just put the animation in a separate div inside the #windowloader div which probably works well enough I guess..

Smoothly animate background color opacity after underlying image loads

I have a div with a black background. When my page loads, I make a call for an image and then load that image into a div behind the main div. Then I want to smoothly fade the overlaying div to have an opacity so that the image underneath is displayed, but without impacting the opacity of content in the overlaying div.
What I have isn't really working at all: https://jsfiddle.net/n7t2xmha/3/
The animation is not smooth
The opacity is not accurate
The text does not stay solid
Code:
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.outerdiv-opaque {
opacity: 0.9 !important;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index=-1;
}
JS
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);
}, 1000)

Separate the timeouts functions.
modify the .outerdiv-opaque class
.outerdiv-opaque {
background-color: white;
}
your timeOut functions after separating would look like this
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
}, 1000)
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);

I would use a pseudo, like this, which will keep your markup as is and as the opacity is on the pseudo it won't effect any other element.
Instead of a script, I used an extra step on the animation, where I told it to keep its opacity at 1 up until 60% of the animation time before it should start to fade.
.outerdiv {
position: relative;
height: 500px;
width: 500px;
color: white;
background: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv::before {
content: '';
background-color: black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
animation: fade 2s linear;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
p {
position: relative;
}
#keyframes fade {
0% { opacity:1 }
60% { opacity:1 }
100% { opacity:0.5 }
}
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>

There are literally a dozen ways to do this. Here are four basic examples which work smoothly.
Using CSS Transitions
HTML:
<div class="container">
<div class="outerdiv">
</div>
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv.fadeout{
opacity:0
}
.container p{
position:relative;
z-index:3;
}
JS:
// wait 1 second, add the fadeout class, let the CSS do the rest
setTimeout(function(){
document.querySelector('.outerdiv').classList.add('fadeout')
},1000);
See it in action: https://jsfiddle.net/kmm8e0x7/8/
Using CSS Animation
HTML: same as above
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv{
animation: fadeout .5s linear forwards 1s;
/*
Which is shorthand for:
animation-name: fadeout
animation-duration: .5s;
animation-timing-function: linear
animation-fill-mode:forwards;
animation-delay: 1s
*/
}
.container p{
position:relative;
z-index:3;
}
#keyframes fadeout{
from{opacity:1}
to{opacity:0}
}
JS: none (animation-delay property removes the need for setTimeout)
See it in action: https://jsfiddle.net/kmm8e0x7/7/
Using JavaScript
HTML: as above
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.container p{
position:relative;
z-index:3;
}
JS:
var el = document.querySelector('.outerdiv');
function fadeout(){
el.style.opacity -= 0.01;
if(el.style.opacity !== 0){
requestAnimationframe(fadeout);
// this could just as easily be setTimeout(fadeout,t) where t = an increment of time after which to call the next frame
}
}
// just use setTimeout to wait for 1 second before starting the fadeout
setTimeout(fadeout,1000);
See it in action: https://jsfiddle.net/kmm8e0x7/6/
Using jQuery
HTML: same as above
CSS: same as above
JS:
$('.outerdiv').animate({
'opacity': '0'
}, 500);
See it in action: https://jsfiddle.net/kmm8e0x7/5/

How does Mozilla create this animated effect?

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.

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.

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

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
}

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