Multiple image loading animation not working

Multiple image loading animation not working - javascript

I have two images on my html page and i'm using jquery to check when they are fully loaded before removing the circle loader overlay (individually for each image).
So at the beginning the overlay with the loader animation is shown on each pictures, and every time a picture is loaded the overlay is toggled off. But with my current code the overlay is not toggled off at all.
<div class="img" id="img1">
<div class="image-loader">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
<div class="img" id="img2">
<div class="image-loader">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
$(document).ready(function(){
$('.img').each(function(){
let img = $(this).css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
$('<img/>').attr('src', img).on('load', function() {
$('#' + $(this).attr('id') + ' .image-loader').hide();
});
});
});
The code was working for a single image:
$(document).ready(function(){
let img = $('#img1').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
$('<img/>').attr('src', img).on('load', function() {
$('#img1 .image-loader').hide();
});
});
Does anyone have a solution for this? thanks

this inside your load function refers to the dynamic $('<img/>') element. So $(this).attr('id') is undefined and none of the loaders disappear.
You need to store a reference before and use it as shown:
$(document).ready(function() {
$('.img').each(function() {
let img = $(this).css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "");
let id = $(this).attr('id')
$('<img/>').attr('src', img).on('load', function() {
$('#' + id + ' .image-loader').hide();
});
});
});
body {
margin: 0
}
.view {
height: 100vh;
width: 100vw;
background-color: blanchedalmond;
display: grid;
place-content: center;
}
.img {
background-position: center center;
background-size: cover;
height: 50vh;
width: 50vw;
}
#img1 {
background-image: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x5400x2700.jpg');
}
#img2 {
background-image: url('https://edmullen.net/test/rc.jpg');
}
.image-loader {
height: 100%;
width: 100%;
display: grid;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
}
.cssload-speeding-wheel {
width: 49px;
height: 49px;
margin: 0 auto;
border: 5px solid rgba(255, 255, 255, 0.85);
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
animation: cssload-spin 800ms infinite linear;
-o-animation: cssload-spin 800ms infinite linear;
-ms-animation: cssload-spin 800ms infinite linear;
-webkit-animation: cssload-spin 800ms infinite linear;
-moz-animation: cssload-spin 800ms infinite linear;
}
#keyframes cssload-spin {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes cssload-spin {
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes cssload-spin {
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes cssload-spin {
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view">
<div class="img" id="img1">
<div class="image-loader">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
<div class="img" id="img2">
<div class="image-loader">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
</div>

Related

Trigger animation on page load

I have a code that triggers an animation on some elements when they're hovered by adding a second css class on them, and once it's done, this class is removed so it becomes static again. I don't know how to make the animation happen every time the page is loaded tho, I tried adding a "window.load" function but it didn't work out. I'd appreciate if someone could shed me a light on it.
Here's the snippet: https://jsfiddle.net/6fmno8vb/1/
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>
Thanks!

I will give two solutions.
Wrap event mouseenter with a window load event.
$(window).on('load', function() {
...
$(".main-logo").trigger("mouseenter");
});
$(window).on("load", function () {
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
$(".main-logo").trigger("mouseenter");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>
If you trigger a mouse event immediately after the page is launched, then it does not always look efficient. I advise you to wrap the event mouseenter call in setTimeout(), specifying any appropriate value for the delay.
setTimeout(function () {
$(".main-logo").trigger("mouseenter");
}, 1000);
setTimeout(function () {
$(".main-logo").trigger("mouseenter");
}, 1000);
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>

Dear according to your question you want the animation to be loaded on page load, so I have added document. ready function and also your old function is also there, so both functionalities on hover and on page is load is available
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(document).ready(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>

Flip Multiple Images one after another after some Delay

In my website, I want to create a CSS animation where I am trying to flip multiple images one after another after 1sec delay, but it's not working. When the first images flips then second image should flip then thrid and so on
Like this but onload, Each image should flip one after another.
Suppose there are 4 Images 1st image flips with delay:0 then second image flips with delay:1 an so on till fourth Image with delay:4
javascript
document.addEventListener("DOMContentLoaded", function() {
var rotateComplete = function() {
with(target.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "";
}
target.appendChild(arr[0]);
setTimeout(function(el) {
with(el.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "rotator2";
}
}, 0, target);
};
var target = document.getElementById("rotator2");
var arr = target.getElementsByTagName("a");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
target.addEventListener("animationend", rotateComplete, false);
target.addEventListener("MSAnimationEnd", rotateComplete, false);
}, false);
#stage2 {
margin: 2em auto 1em 50%;
height: 240px;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 0 50%;
-moz-perspective: 1200px;
-moz-perspective-origin: 0 50%;
-ms-perspective: 1200px;
-ms-perspective-origin: 0 50%;
}
#rotator2 a {
position: absolute;
left: -151px;
-moz-transform-style: preserve-3d;
}
#rotator2 a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
#rotator2 a:nth-child(1) img {
-webkit-transform: rotateY(-120deg) translateZ(80px);
-moz-transform: rotateY(-120deg) translateZ(80px);
-ms-transform: rotateY(-120deg) translateZ(80px);
}
#rotator2 a:nth-child(2) img {
-webkit-transform: translateZ(80px);
-moz-transform: translateZ(80px);
-ms-transform: translateZ(80px);
}
#rotator2 a:nth-child(3) img {
-webkit-transform: rotateY(120deg) translateZ(80px);
-moz-transform: rotateY(120deg) translateZ(80px);
-ms-transform: rotateY(120deg) translateZ(80px);
}
#rotator2 a:nth-child(n+4) {
display: none;
}
#-webkit-keyframes rotator2 {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-120deg);
}
}
#-moz-keyframes rotator2 {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-120deg);
}
}
#-ms-keyframes rotator2 {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(-120deg);
}
}
#rotator2 {
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-webkit-animation-duration: 2s;
-webkit-animation-delay: 1s;
-moz-transform-origin: 0 0;
-moz-transform-style: preserve-3d;
-moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-moz-animation-duration: 2s;
-moz-animation-delay: 1s;
-ms-transform-origin: 0 0;
-ms-transform-style: preserve-3d;
-ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-ms-animation-duration: 2s;
-ms-animation-delay: 1s;
}
#rotator2:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
}
<div id="stage2">
<div id="rotator2" style="-webkit-animation-name: rotator2; -moz-animation-name: rotator2; -ms-animation-name: rotator2;">
<img src="img/1.jpg" width="280" alt ="1">
<img src="img/2.jpg" width="280" alt ="2">
<img src="img/3.jpg" width="280" alt ="3">
<img src="img/4.jpg" width="280" alt ="4">
<img src="img/5.jpg" width="280" alt ="5">
<img src="img/6.jpg" width="280" alt ="6">
<img src="img/7.jpg" width="280" alt ="7">
<img src="img/8.jpg" width="280" alt ="8">
</div>
</div>
Here the 1st image is continuously fliping

If I understand you correctly, as I said, you can use animation-delay. The value will be
(card index) * animation-duration.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
display: inline-block;
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.flip-card .flip-card-inner {
animation: rotate 3s .3s infinite;
}
.flip-card:nth-child(2) .flip-card-inner {
animation-delay: .6s;
}
.flip-card:nth-child(3) .flip-card-inner {
animation-delay: .9s;
}
.flip-card:nth-child(4) .flip-card-inner {
animation-delay: 1.2s;
}
#keyframes rotate {
0%, 60% {
transform: rotateY(0);
}
10%, 50% {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="cards">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
</body>
</html>
Update
To run it infinite, the animation should calculated differently because it should take care for the back animation.
The calculation is
0.3s (flip animation) * 5 (4 cards + 1 more for delay between iteration) * 2 (back and forth) = 3s.
So each "tick" is 10%. We want to flip it back just in the middle of the animation so it 50%. More 10% for the back animation tick.
Here is the lifecycle:
|---|---|---|---|---|---|---|---|---|---|
|___|___|___|___|___|___|___|___|___|___|
Front w w w w Back w w w w
.3s .3s .3s .3s .3s .3s .3s .3s .3s .3s
|_______________________________________|
3s

You can simply use that code attached below HTML and CSS trick:
<div class="c-searchblock_loop">
<div class="c-searchblock_loop-content">
<div class="c-searchblock_chevron">
<svg class="c-icon">
<use xlink:href="https://www.subachahai.com/dist/assets/icons/icons-sprite.svg#icon-chevron"></use>
</svg>
</div>
<div class="c-searchblock_image -first">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-1.png" alt="tools-1">
</div>
<div class="c-searchblock_image -back -second">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-2.png" alt="tools-2">
</div>
<div class="c-searchblock_image -third">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-3.png" alt="tools-3">
</div>
<div class="c-searchblock_image -back -fourth">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-4.png" alt="tools-4">
</div>
</div>
</div>
CSS:
.c-searchblock_chevron {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-searchblock_chevron, .c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-searchblock_image.-first {
-webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
}
.c-searchblock_image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50% -25px;
transform-origin: 50% 50% -25px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.c-searchblock_chevron, .c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-searchblock_image.-back.-second {
-webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
-webkit-transform: rotateY(
180deg);
transform: rotateY(
180deg);
}
.c-searchblock_image.-third {
-webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back.-fourth {
-webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
-webkit-transform: rotateY(
180deg);
transform: rotateY(
180deg);
}
.c-searchblock.is-active .c-searchblock_footer,
.c-searchblock.is-active .c-searchblock_loop {
-webkit-transform: translate(0);
transform: translate(0)
}
.c-searchblock_loop {
position: relative;
display: inline-block;
width: 180px;
height: 180px;
-webkit-perspective: 200px;
perspective: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s, -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s
margin: 50px auto;
}
.editMode .c-searchblock_loop {
-webkit-transform: none;
transform: none;
-webkit-transition: none;
transition: none
}
.c-searchblock_loop-content {
width: 100%;
height: 100%;
-webkit-animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite;
animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite
}
.c-searchblock_chevron,
.c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.c-searchblock_chevron {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.c-searchblock_chevron svg {
fill: #fff;
width: 120px;
height: 110px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
#-webkit-keyframes loop {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
25% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
75% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
to {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
}
#keyframes loop {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
25% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
75% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
to {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
}
#-webkit-keyframes loop-first {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
75% {
opacity: 0
}
76% {
opacity: 1
}
to {
opacity: 1
}
}
#keyframes loop-first {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
75% {
opacity: 0
}
76% {
opacity: 1
}
to {
opacity: 1
}
}
#-webkit-keyframes loop-second {
0% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
to {
opacity: 0
}
}
#keyframes loop-second {
0% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
to {
opacity: 0
}
}
#-webkit-keyframes loop-third {
0% {
opacity: 0
}
25% {
opacity: 0
}
26% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
to {
opacity: 0
}
}
#keyframes loop-third {
0% {
opacity: 0
}
25% {
opacity: 0
}
26% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
to {
opacity: 0
}
}
#-webkit-keyframes loop-fourth {
0% {
opacity: 0
}
50% {
opacity: 0
}
51% {
opacity: 1
}
to {
opacity: 1
}
}
#keyframes loop-fourth {
0% {
opacity: 0
}
50% {
opacity: 0
}
51% {
opacity: 1
}
to {
opacity: 1
}
}
#-webkit-keyframes loop-image-back {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
50% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
75% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
to {
-webkit-transform: rotateY(540deg);
transform: rotateY(540deg)
}
}
#keyframes loop-image-back {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
50% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
75% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
to {
-webkit-transform: rotateY(540deg);
transform: rotateY(540deg)
}
}

Page loader not working in firefox

I have a page loader , it will load until my entire page loading complete ,this works fine with chrome but doesnt support in firefox .any other solutions welcome
<style>
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}
</style>
<body>
<div id="loading">
<img id="loading-image" src="images/loader.gif" alt="Loading..." />
</div>
<script>
window.onload = function(){ document.getElementById("loading").style.display = "none" }
</script>
</body>

this is a complete ansower for u :)
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 30;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display:block;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
that was the style now the body
<div id="loader"></div>
hope it helps :)

HTML modal popup animation not working second time

I have created the following code to display a popup, and it works fine with the animation I added afterwards to have a pop-out effect. However, if I close it and attempt to reopen it, the animation does not show? the modal just instantly appears.
How do I fix it?
<div id="overlay">
<div class="popout">
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
.popout {
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
}
#keyframes popout {
from{transform:scale(0)}
80%{transform:scale(1.2)}
to{transform:scale(1)}
}
#-webkit-keyframes popout {
from{-webkit-transform:scale(0)}
80%{-webkit-transform:scale(1.2)}
to{-webkit-transform:scale(1)}
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>

Look at this please
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
}
#overlay div {
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #000;
padding: 15px;
text-align: center;
}
.popout {
visibility: visible !important;
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
-moz-animation: popout 1s ease;
-ms-animation: popout 1s ease;
}
#keyframes popout {
from {
transform: scale(0)
}
80% {
transform: scale(1.2)
}
to {
transform: scale(1)
}
}
#-webkit-keyframes popout {
from {
-webkit-transform: scale(0)
}
80% {
-webkit-transform: scale(1.2)
}
to {
-webkit-transform: scale(1)
}
}
#-moz-keyframes popout {
from {
-moz-transform: scale(0)
}
80% {
-moz-transform: scale(1.2)
}
to {
-moz-transform: scale(1)
}
}
#-ms-keyframes popout {
from {
-ms-transform: scale(0)
}
80% {
-ms-transform: scale(1.2)
}
to {
-ms-transform: scale(1)
}
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
var clases = el.className;
if (clases.indexOf('popout') == -1) {
el.className = 'popout';
} else {
el.className = '';
}
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
https://jsfiddle.net/xapdhxv3/1/

Loading CSS3 when page loads

I have the following HTML code. I have applied some animations to the logo using CSS3 and it's working as I wanted. Now the animation works when we hover on the logo. I want the animation to work automatically when the page loads.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After Quote</title>
<style type="text/css">
.container {
background: none repeat scroll 0 0 #1180AE;
height: 340px;
margin: 0 auto;
padding-top: 50px;
width: 215px;
background: url(container.jpg) no-repeat;
}
.content {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 8px;
height: 200px;
margin: 0 auto;
padding-top: 115px;
width: 194px;
}
.logo:hover {
border-radius: 50%;
transform: rotate(720deg);
}
.logo {
height: 80px;
margin: 0 auto;
transition: all 1s ease 0s;
width: 80px;
}
.logo img {
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="logo"> <img src="logo.jpg" alt="logo" /> </div>
<!--logo-->
</div>
<!--content-->
</div>
<!--container-->
</body>
</html>

There are multiple ways how you can achieve this:
The first one is to add a class to the logo after pageload with JavaScript. You need to do this, because CSS transitions only react on changes like classlist changes, hover etc., but can not start by itself.
The second way is to use CSS keyframe animations, which I believe is more what you want. You can learn about it here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

#-webkit-keyframes anm {
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(180deg);}
50% {-webkit-transform: rotate(360deg);}
75% {-webkit-transform: rotate(540deg);}
100% {-webkit-transform: rotate(720deg);}
}
#keyframes anm {
0% {transform: rotate(0deg);}
25% {transform: rotate(180deg);}
50% {transform: rotate(360deg);}
75% {transform: rotate(540deg);}
100% {transform: rotate(720deg);}
}
.logo img {
height: 80px;
border-radius: 15px;
-webkit-animation: anm 1s;
animation: anm 1s;
}
.logo img:hover {
border-radius: 50%;
transition: all 1s ease 0s;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}

It won't unless you use #keyframes CSS animations. you can use like mentioned below..
and use animation-rotate class in your img tag. Here is the Demo.
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
-moz-animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#-moz-keyframes coinflip {
0% {
-moz-transform:rotateY(-1deg);
}
100% {
-moz-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}

Develop Reference

JavaScript is the programming language of the Web.

Multiple image loading animation not working - javascript

Related

Trigger animation on page load

Flip Multiple Images one after another after some Delay

Page loader not working in firefox

HTML modal popup animation not working second time

Loading CSS3 when page loads

Categories

Resources