Why does the last frame show up before first in animation?

Why does the last frame show up before first in animation? - javascript

I was trying to make a "bounce-in" effect where the circle isn't there before the animation, then the animation is executed on scroll, and the circle remains there after the animation is over. But for some reason it's there even before the animation, then disappears (since first frame opacity is 0) then appears again. I'm not sure what I'm doing wrong.
if (browser.canUse('transition')) {
var on = function() {
// Circles
$('.circle')
.scrollex({
mode: 'bottom',
delay: 50,
initialize: function() {
$(this).addClass('bounceIn');
},
terminate: function() {
$(this).removeClass('bounceIn');
},
enter: function() {
$(this).removeClass('bounceIn');
},
leave: function() {
$(this).addClass('bounceIn');
}
});
.circle {
position: absolute;
border-radius: 50%;
}
.circle.circle1 {
top: 80px;
left: 120px;
width: 100px;
height: 100px;
background: white;
opacity: 0;
}
/* ----------- BOUNCE IN ------------*/
#-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
}
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
20% {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
40% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
60% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
80% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
}
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
20% {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
40% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
60% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
80% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<div class="circle circle1"></div>

Related

Right side wave is not visible [duplicate]

I want a Radar wave animation like this:
With a lot of effort using my poor knowledge of Svgs I added the left side of the desired wave and it works fine. but I need some help to add the right side with a proper solution.
Note: if you know any source code or any better solution to achieve such animation which is simpler than mine please fell free to notify me.
Note 2: I need a function to initiate the animation.
Thanks in advance.
function Wave() {
const waves = document.querySelectorAll(".radio-wave");
waves.forEach(wave => wave.classList.add('add-wave'));
const wave1 = document.querySelector(".radio-wave-1");
wave1.classList.add('add-radio-wave-1');
const wave2 = document.querySelector(".radio-wave-2");
wave2.classList.add('add-radio-wave-2');
const wave3 = document.querySelector(".radio-wave-3");
wave3.classList.add('add-radio-wave-3');
const wave4 = document.querySelector(".radio-wave-4");
wave4.classList.add('add-radio-wave-4');
const wave5 = document.querySelector(".radio-wave-5");
wave5.classList.add('add-radio-wave-5');
const wave6 = document.querySelector(".radio-wave-6");
wave6.classList.add('add-radio-wave-6');
}
setTimeout(() => Wave(), 2000);
body {
background: black;
}
.left-wave-container {
position: relative;
margin-right: 50%;
padding: 0;
font-size: 16px;
}
.radio-wave-container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
margin: 5rem;
}
.radio-wave-container.content {
flex-flow: row nowrap;
width: 100%;
}
.radio-source {
position: absolute;
right: 2rem;
width: 2rem;
fill: #fcba03;
}
.add-wave {
-webkit-animation-duration: 2.2s;
animation-duration: 2.2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.radio-wave {
position: absolute;
right: 2rem;
stroke-linecap: round;
stroke-width: 4;
stroke: #fcba03;
fill: none;
transform: scale(0.2) translateX(150%);
opacity: 0;
width: 5rem;
height: 5rem;
}
.add-radio-wave-1 {
-webkit-animation-name: wave-1;
animation-name: wave-1;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#-webkit-keyframes wave-1 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-1 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-2 {
-webkit-animation-name: wave-2;
animation-name: wave-2;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#-webkit-keyframes wave-2 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-2 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-3 {
-webkit-animation-name: wave-3;
animation-name: wave-3;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#-webkit-keyframes wave-3 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-3 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-4 {
-webkit-animation-name: wave-4;
animation-name: wave-4;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#-webkit-keyframes wave-4 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-4 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-5 {
-webkit-animation-name: wave-5;
animation-name: wave-5;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#-webkit-keyframes wave-5 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-5 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-6 {
-webkit-animation-name: wave-6;
animation-name: wave-6;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes wave-6 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-6 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
<div class="left-wave-container" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="position:absolute;width:0;height:0;" width="0" height="0" version="1.1">
<defs>
<symbol id="radio-wave" viewBox="0 0 100 200">
<g>
<path d="M62.5,185 Q12.5,100 62.5,15" />
</g>
</symbol>
<symbol id="radio-source" viewBox="0 0 100 100">
</symbol>
</defs>
</svg>
<div class="radio-wave-container">
<div class="radio-wave-container content">
<svg class="radio-source">
<use xlink:href="#radio-source"></use>
</svg>
<svg class="radio-wave radio-wave-1">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-2">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-3">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-4">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-5">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-6">
<use xlink:href="#radio-wave"></use>
</svg>
</div>
</div>
</div>

Using
transform: rotate(180deg);
On a wrapping div will reflect the animation, so you can use it on the right side.
Example:
<div class="radio-wave-container">
<div class="radio-wave-container content">
<div class="reflect">
<svg class="radio-source">
<use xlink:href="#radio-source"></use>
</svg>
</div>
...(etc)
With the following added to the stylesheet:
.reflect {
transform: rotate(180deg);
}

Accessing elements wave1..wave6 should be like querySelectorAll:
const wave1 = document.querySelectorAll(".radio-wave-1");
...
const wave6 = document.querySelectorAll(".radio-wave-6");
Because this is a collection.
Next, I applied a for loop, specifying 2 as index to add a class for each wave1..wave6.
Also, I decided to correct your html and css layout. If you want your waves to be in the picture that you showed, then you need to do the following:
Use flex to align with each other. Add this to your css:
.wave-container {
display: flex;
justify-content: center;
}
And remove rule margin-right: 50% from .left-wave-container and .right-wave-container selectors.
Now it's done!
function Wave() {
const waves = document.querySelectorAll(".radio-wave");
const wave1 = document.querySelectorAll(".radio-wave-1");
const wave2 = document.querySelectorAll(".radio-wave-2");
const wave3 = document.querySelectorAll(".radio-wave-3");
const wave4 = document.querySelectorAll(".radio-wave-4");
const wave5 = document.querySelectorAll(".radio-wave-5");
const wave6 = document.querySelectorAll(".radio-wave-6");
waves.forEach(function(wave) {
wave.classList.add('add-wave');
for (var i = 0; i < 2; i++) {
wave1[i].classList.add('add-radio-wave-1');
wave2[i].classList.add('add-radio-wave-2');
wave3[i].classList.add('add-radio-wave-3');
wave4[i].classList.add('add-radio-wave-4');
wave5[i].classList.add('add-radio-wave-5');
wave6[i].classList.add('add-radio-wave-6');
}
});
}
setTimeout(() => Wave(), 2000);
body {
background: black;
}
.wave-container {
display: flex;
justify-content: center;
}
.left-wave-container {
position: relative;
/*margin-right: 50%;*/
padding: 0;
font-size: 16px;
}
.right-wave-container {
position: relative;
/*margin-right: 50%;*/
padding: 0;
font-size: 16px;
transform: rotate(180deg); /* flip the animation*/
}
.radio-wave-container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
margin: 5rem;
}
.radio-wave-container.content {
flex-flow: row nowrap;
width: 100%;
}
.radio-source {
position: absolute;
right: 2rem;
width: 2rem;
fill: #fcba03;
}
.add-wave {
-webkit-animation-duration: 2.2s;
animation-duration: 2.2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.radio-wave {
position: absolute;
right: 2rem;
stroke-linecap: round;
stroke-width: 4;
stroke: #fcba03;
fill: none;
transform: scale(0.2) translateX(150%);
opacity: 0;
width: 5rem;
height: 5rem;
}
.add-radio-wave-1 {
-webkit-animation-name: wave-1;
animation-name: wave-1;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#-webkit-keyframes wave-1 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-1 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-2 {
-webkit-animation-name: wave-2;
animation-name: wave-2;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#-webkit-keyframes wave-2 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-2 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-3 {
-webkit-animation-name: wave-3;
animation-name: wave-3;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#-webkit-keyframes wave-3 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-3 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-4 {
-webkit-animation-name: wave-4;
animation-name: wave-4;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#-webkit-keyframes wave-4 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-4 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-5 {
-webkit-animation-name: wave-5;
animation-name: wave-5;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#-webkit-keyframes wave-5 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-5 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
.add-radio-wave-6 {
-webkit-animation-name: wave-6;
animation-name: wave-6;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes wave-6 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
#keyframes wave-6 {
0% {
transform: scale(0.2) translateX(150%);
opacity: 0.2;
}
10% {
transform: scale(0.3) translateX(50%);
opacity: 0.3;
}
20% {
transform: scale(0.4) translateX(-40%);
opacity: 0.4;
}
30% {
transform: scale(0.5) translateX(-120%);
opacity: 0.5;
}
40% {
transform: scale(0.6) translateX(-190%);
opacity: 0.6;
}
50% {
transform: scale(0.7) translateX(-250%);
opacity: 0.7;
}
60% {
transform: scale(0.8) translateX(-300%);
opacity: 0.8;
}
70% {
transform: scale(0.9) translateX(-350%);
opacity: 0.9;
}
80% {
transform: scale(1) translateX(-400%);
}
90% {
transform: scale(1.1) translateX(-450%);
}
100% {
transform: scale(1.2) translateX(-500%);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wave-container">
<div class="left-wave-container" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="position:absolute;width:0;height:0;" width="0" height="0" version="1.1">
<defs>
<symbol id="radio-wave" viewBox="0 0 100 200">
<g>
<path d="M62.5,185 Q12.5,100 62.5,15" />
</g>
</symbol>
<symbol id="radio-source" viewBox="0 0 100 100">
</symbol>
</defs>
</svg>
<div class="radio-wave-container">
<div class="radio-wave-container content">
<svg class="radio-source">
<use xlink:href="#radio-source"></use>
</svg>
<svg class="radio-wave radio-wave-1">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-2">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-3">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-4">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-5">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-6">
<use xlink:href="#radio-wave"></use>
</svg>
</div>
</div>
</div>
<div class="right-wave-container" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="position:absolute;width:0;height:0;" width="0" height="0" version="1.1">
<defs>
<symbol id="radio-wave" viewBox="0 0 100 200">
<g>
<path d="M62.5,185 Q12.5,100 62.5,15" />
</g>
</symbol>
<symbol id="radio-source" viewBox="0 0 100 100">
</symbol>
</defs>
</svg>
<div class="radio-wave-container">
<div class="radio-wave-container content">
<svg class="radio-source">
<use xlink:href="#radio-source"></use>
</svg>
<svg class="radio-wave radio-wave-1">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-2">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-3">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-4">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-5">
<use xlink:href="#radio-wave"></use>
</svg>
<svg class="radio-wave radio-wave-6">
<use xlink:href="#radio-wave"></use>
</svg>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

preloader for part of content in current theme wp

I need to show preloader only in 'content' div, but preloader hides entire page. Structure site:
Title
Menu
Content (here i need preloader)
Footer
I can't find, where i need insert my code of preloader...
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
$(window).load(function() {
$(".cssload-loader").delay(1400).fadeOut();
$(".preloader").delay(1500).fadeOut("slow");
})
.preloader {
position: fixed;
background-color: #fff;
z-index: 107;
height: 100%;
width: 100%;
}
.cssload-loader {
position: absolute;
left: 50%;
top: 50%;
width: 34.284271247462px;
height: 34.284271247462px;
margin-left: -17.142135623731px;
margin-top: -17.142135623731px;
border-radius: 100%;
animation-name: cssload-loader;
-o-animation-name: cssload-loader;
-ms-animation-name: cssload-loader;
-webkit-animation-name: cssload-loader;
-moz-animation-name: cssload-loader;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-duration: 2.8s;
-o-animation-duration: 2.8s;
-ms-animation-duration: 2.8s;
-webkit-animation-duration: 2.8s;
-moz-animation-duration: 2.8s;
}
.cssload-loader .cssload-side {
display: block;
width: 4px;
height: 14px;
background-color: rgba(0,0,0,0.81);
margin: 1px;
position: absolute;
border-radius: 50%;
animation-duration: 1.045s;
-o-animation-duration: 1.045s;
-ms-animation-duration: 1.045s;
-webkit-animation-duration: 1.045s;
-moz-animation-duration: 1.045s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-timing-function: ease;
-o-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
}
.cssload-loader .cssload-side:nth-child(1),
.cssload-loader .cssload-side:nth-child(5) {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
animation-name: cssload-rotate0;
-o-animation-name: cssload-rotate0;
-ms-animation-name: cssload-rotate0;
-webkit-animation-name: cssload-rotate0;
-moz-animation-name: cssload-rotate0;
}
.cssload-loader .cssload-side:nth-child(3),
.cssload-loader .cssload-side:nth-child(7) {
transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
animation-name: cssload-rotate90;
-o-animation-name: cssload-rotate90;
-ms-animation-name: cssload-rotate90;
-webkit-animation-name: cssload-rotate90;
-moz-animation-name: cssload-rotate90;
}
.cssload-loader .cssload-side:nth-child(2),
.cssload-loader .cssload-side:nth-child(6) {
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
animation-name: cssload-rotate45;
-o-animation-name: cssload-rotate45;
-ms-animation-name: cssload-rotate45;
-webkit-animation-name: cssload-rotate45;
-moz-animation-name: cssload-rotate45;
}
.cssload-loader .cssload-side:nth-child(4),
.cssload-loader .cssload-side:nth-child(8) {
transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
animation-name: cssload-rotate135;
-o-animation-name: cssload-rotate135;
-ms-animation-name: cssload-rotate135;
-webkit-animation-name: cssload-rotate135;
-moz-animation-name: cssload-rotate135;
}
.cssload-loader .cssload-side:nth-child(1) {
top: 17.142135623731px;
left: 34.284271247462px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(2) {
top: 29.213203431093px;
left: 29.213203431093px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(3) {
top: 34.284271247462px;
left: 17.142135623731px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(4) {
top: 29.213203431093px;
left: 5.0710678163691px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(5) {
top: 17.142135623731px;
left: 0px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(6) {
top: 5.0710678163691px;
left: 5.0710678163691px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(7) {
top: 0px;
left: 17.142135623731px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(8) {
top: 5.0710678163691px;
left: 29.213203431093px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
#keyframes cssload-rotate0 {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-o-keyframes cssload-rotate0 {
0% {
-o-transform: rotate(0deg);
}
60% {
-o-transform: rotate(180deg);
}
100% {
-o-transform: rotate(180deg);
}
}
#-ms-keyframes cssload-rotate0 {
0% {
-ms-transform: rotate(0deg);
}
60% {
-ms-transform: rotate(180deg);
}
100% {
-ms-transform: rotate(180deg);
}
}
#-webkit-keyframes cssload-rotate0 {
0% {
-webkit-transform: rotate(0deg);
}
60% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#-moz-keyframes cssload-rotate0 {
0% {
-moz-transform: rotate(0deg);
}
60% {
-moz-transform: rotate(180deg);
}
100% {
-moz-transform: rotate(180deg);
}
}
#keyframes cssload-rotate90 {
0% {
transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-o-keyframes cssload-rotate90 {
0% {
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-ms-keyframes cssload-rotate90 {
0% {
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-webkit-keyframes cssload-rotate90 {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-moz-keyframes cssload-rotate90 {
0% {
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#keyframes cssload-rotate45 {
0% {
transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-o-keyframes cssload-rotate45 {
0% {
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-ms-keyframes cssload-rotate45 {
0% {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-webkit-keyframes cssload-rotate45 {
0% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-moz-keyframes cssload-rotate45 {
0% {
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-moz-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-moz-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#keyframes cssload-rotate135 {
0% {
transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-o-keyframes cssload-rotate135 {
0% {
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-ms-keyframes cssload-rotate135 {
0% {
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-webkit-keyframes cssload-rotate135 {
0% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-moz-keyframes cssload-rotate135 {
0% {
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#keyframes cssload-loader {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes cssload-loader {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes cssload-loader {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes cssload-loader {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<?php
get_header();
get_template_part('index', 'banner');
?>
<!-- Blog Full Width Section -->
<div class="blog-section">
<div class="container">
<div class="row">
<!--Blog Area-->
<div class="<?php elitepress_post_layout_class(); ?>" >
<?php get_template_part('content',''); ?>
<?php comments_template('',true); ?>
</div>
<!--/Blog Area-->
<div class="preloader" style="display: block;">
<div class="cssload-loader" style="display: block;">
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
<!-- /Blog Full Width Section -->

A simple solution using a FontAwesome spinner. Colors used are for visualization only.
$(".spinner").delay(1400).fadeOut();
header,
nav,
footer {
width: 100%;
height: 50px;
}
header {
background-color: red;
}
nav {
background-color: blue;
}
footer {
background-color: green;
}
.content {
width: 100%;
height: 200px;
position: relative;
}
.spinner {
width: 100%;
height: 100%;
background-color: purple;
text-align: center;
display: table;
}
.spinner i {
display: table-cell;
vertical-align: middle;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<header></header>
<nav></nav>
<div class="content">
<div class="spinner"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>
</div>
<footer></footer>

How to hide the div on click through animation css

I am trying to show and hide the div based on css animation, but I need to hide the entirely once the button is clicked, and it should happen along with animation.
Currently it is animating but not hiding.
THis is what I tried.
document.getElementById('toggle').onclick = function(evt) {
var eSib = evt.target.previousElementSibling.className;
if(evt.target.previousElementSibling.className.indexOf('slideDown')>=0){
evt.target.previousElementSibling.className = 'slideUp';
}
else{
evt.target.previousElementSibling.className = 'slideDown';
}
}
.slideDown{
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullDown {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullDown {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
.slideUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.98);
}
100% {
transform: scaleY(0);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.98);
}
100% {
-webkit-transform: scaleY(0);
}
}
<div class="slideDown">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<button id="toggle">Slide Up/Down</button>

You can use animation-fill-mode: forwards; in your .slideUp class to persist the state of the animation after it has completed.
.slideUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
animation-fill-mode: forwards;
}
Here is a fiddle of it in action: https://jsfiddle.net/3m353906/
The vendor prefixes and more info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Use animation-fill-mode to maintain the final state of the animation.
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
Working version:
document.getElementById('toggle').onclick = function(evt) {
var eSib = evt.target.previousElementSibling.className;
if (evt.target.previousElementSibling.className.indexOf('slideDown') >= 0) {
evt.target.previousElementSibling.className = 'slideUp';
} else {
evt.target.previousElementSibling.className = 'slideDown';
}
}
.slideDown {
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullDown {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullDown {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
.slideUp {
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.98);
}
100% {
transform: scaleY(0);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.98);
}
100% {
-webkit-transform: scaleY(0);
}
}
<div class="slideDown">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<button id="toggle">Slide Up/Down</button>

How to create the following effect in jquery or javascript

I want to create an effect in jquery/ javascript so that the play button in the image grows to some size then shrinks back suddenly with a bouncy/pulsating effect.

This can be done easily with CSS3 animations.
HTML:
<div class="container">
<div class="myButton">
<a class="myButton">
<img src="http://i.stack.imgur.com/FcuEp.png" alt="" />
</a>
</div>
</div>
CSS for growing and shrinkin object:
.container {
width: 100%;
padding: 100px;
text-align: center;
}
#-webkit-keyframes zoomout {
from { -webkit-transform: none; }
50% { -webkit-transform: scale(1.5); }
to { -webkit-transform: none; }
}
#keyframes zoomout {
from { transform: none; }
50% { transform: scale(1.5); }
to { transform: none; }
}
.myButton:hover {
-webkit-animation: zoomout 1s;
animation: zoomout 1s;
}
jsFiddle
CSS for bounce effect before shrinking to original size:
.container {
width: 100%;
padding: 100px;
text-align: center;
}
#-webkit-keyframes zoomout {
50% {
-webkit-transform: scale3d(1, 1, 1);
}
65% {
-webkit-transform: scale3d(1.2, 1.2, 1.2);
}
75% {
-webkit-transform: scale3d(1.35, 1.35, 1.35);
}
80% {
-webkit-transform: scale3d(1.35, 1.35, 1.35);
}
95% {
-webkit-transform: scale3d(.8, .8, .8);
}
}
#keyframes zoomout {
50% {
transform: scale3d(1, 1, 1);
}
65% {
transform: scale3d(1.2, 1.2, 1.2);
}
75% {
transform: scale3d(1.35, 1.35, 1.35);
}
80% {
transform: scale3d(1.35, 1.35, 1.35);
}
95% {
transform: scale3d(.8, .8, .8);
}
}
.myButton:hover {
-webkit-animation: zoomout 1.5s;
animation: zoomout 1.5s;
}
jsFiddle for bounce CSS
You can tweak the scale and animation to your taste. :)

Workaround for safari's buggy rendering of inner SVG Animation?

I'm looking for a workaround for safari's buggy rendering of inner SVG with CSS Animations.
Here it is on codepen.
Chrome does this perfectly well, but in Safari the transitioning within the animation doesn't render until it jumps between states.
What is causing it?
Relevant CSS3
.avatar {
z-index: 800;
}
.avatar path {
stroke: #e1afff;
stroke-width: 0.15;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 6s ease;
transition: all 6s ease;
-webkit-transform: translate(0);
transform: translate(0);
}
.avatar path:nth-of-type(4n+1) {
-webkit-animation: p1 3s ease 1;
animation: p1 3s ease 1;
}
.avatar path:nth-of-type(4n+2) {
-webkit-animation: p2 3s ease 1;
animation: p2 3s ease 1;
}
.avatar path:nth-of-type(4n+3) {
-webkit-animation: p3 3s ease 1;
animation: p3 3s ease 1;
}
.avatar path:nth-of-type(4n+4) {
-webkit-animation: p4 3s ease 1;
animation: p4 3s ease 1;
}
.hover {
position: absolute;
width: 40%;
height: 40vw;
top: 50%;
left: 30%;
margin-top: -20vw;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
background: rgba(0,0,0,0);
-webkit-animation: waitforit 0 ease-in 3s 1 forwards;
animation: waitforit 0 ease-in 3s 1 forwards;
}
.hover:hover + .avatar path:nth-of-type(4n+1) {
-webkit-transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+2) {
-webkit-transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+3) {
-webkit-transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+4) {
-webkit-transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
}
#-webkit-keyframes p1 {
0% {
-webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p1 {
0% {
-webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p2 {
0% {
-webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
transform: translate(400%, -900%) rotate(850deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p2 {
0% {
-webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
transform: translate(400%, -900%) rotate(850deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p3 {
0% {
-webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
transform: translate(500%, 900%) rotate(325deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p3 {
0% {
-webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
transform: translate(500%, 900%) rotate(325deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p4 {
0% {
-webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p4 {
0% {
-webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes waitforit {
0% {
display: none;
}
100% {
display: block;
}
}
#keyframes waitforit {
0% {
display: none;
}
100% {
display: block;
}
}
The vendor prefix -webkit- applies to both Chrome & Safari. Safari is known to be buggy in rendering inner SVG animations, however there is usually a happy medium. Can anyone think of a workaround of sorts? Maybe an easy js fix?

We Keep Coding

JavaScript is the programming language of the Web.

Why does the last frame show up before first in animation? - javascript

Related

Right side wave is not visible [duplicate]

preloader for part of content in current theme wp

How to hide the div on click through animation css

How to create the following effect in jquery or javascript

Workaround for safari's buggy rendering of inner SVG Animation?

Categories

Resources