Repeating the whole css sequence in loop

Repeating the whole css sequence in loop - javascript

I have a piece of a code which animates text within a div. I want this whole animation to repeat in loop. It's important to keep all files internal as it's going to be a GoogleAds advert and they don't accept external links. Ideally if that can be done using CSS or plain javascript (not jquery)
Here is the code:
* {
font-family: 'Comfortaa'
}
.ad {
margin: 0 auto;
overflow: hidden;
position: relative;
color: #3a3a3a;
background: #0E6AAD;
width: 300px;
height: 250px;
background-size: 300px 250px;
}
.h1-background {
color: white;
text-align: center;
}
h1 {
font-family: 'Baloo';
position: relative;
padding: 10px;
padding-bottom: 0;
font-size: 24px;
font-weight: normal;
margin: 0;
z-index: 1;
}
h2 {
position: relative;
padding: 0 10px;
font-size: 16px;
z-index: 1;
}
<div class="ad">
<div class="h1-background">
<h1 class="slide-up-fade-in">Title
<h1>
<h2 class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
jfiddle here
Thank you for help.

I hope this is what you are expecting.
setInterval(function(){
document.getElementById("cta").classList.remove("slide-up-fade-in");
document.getElementById("cta").classList.remove("delay-1");
document.getElementById("subtitle").classList.remove("slide-up-fade-in");
document.getElementById("subtitle").classList.remove("delay-2");
document.getElementById("title").classList.remove("slide-up-fade-in");
}, 2900);
setInterval(function(){
document.getElementById("title").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("delay-2");
document.getElementById("cta").classList.add("slide-up-fade-in");
document.getElementById("cta").classList.add("delay-1");
}, 3000);
* {
font-family:'Comfortaa'
}
.ad{
margin:0 auto;
overflow:hidden;
position:relative;
color:#3a3a3a;
background: #0E6AAD;
width:300px; height:250px;
background-size: 300px 250px;
}
.h1-background{
color:white;
text-align:center;
}
h1{
font-family:'Baloo';
position:relative;
padding:10px;
padding-bottom:0;
font-size:24px;
font-weight:normal;
margin:0;
z-index:1;
}
h2{
position:relative;
padding:0 10px;
font-size:16px;
z-index:1;
}
button{
padding:10px 20px;
font-size:12px;
background-color:#4285f4;
border:none;
color:white;
position:fixed;
cursor:pointer;
border-radius:50px;
width:180px;
left: 50%;
margin-left: -90px; /*half the width*/
z-index:9999;
top:210px;
}
.slide-up-fade-in{
animation: slide-up-fade-in ease 0.5s infinite;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: slide-up-fade-in ease 0.5s infinite;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: slide-up-fade-in ease 0.5s infinite;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: slide-up-fade-in ease 0.5s infinite;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: slide-up-fade-in ease 0.5s infinite;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
opacity:0;
opacity: 1\9;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes slide-up-fade-in{
0% {
opacity:0;
-moz-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes slide-up-fade-in {
0% {
opacity:0;
-webkit-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes slide-up-fade-in {
0% {
opacity:0;
-o-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes slide-up-fade-in {
0% {
opacity:0;
-ms-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
<div class="ad">
<div class="h1-background">
<h1 id="title" class="slide-up-fade-in">Title<h1>
<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
or in jsfidle : https://jsfiddle.net/hbw1uetr/22/
EDIT
If you want to loop n times you need to specify when you want to destroy the setInterval function. Tou can find the updated jsfiddle https://jsfiddle.net/hbw1uetr/59/
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
setIntervalX(function () {
document.getElementById("cta").classList.remove("slide-up-fade-in");
document.getElementById("cta").classList.remove("delay-1");
document.getElementById("subtitle").classList.remove("slide-up-fade-in");
document.getElementById("subtitle").classList.remove("delay-2");
document.getElementById("title").classList.remove("slide-up-fade-in");
}, 2900, 2);
setIntervalX(function () {
document.getElementById("title").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("delay-2");
document.getElementById("cta").classList.add("slide-up-fade-in");
document.getElementById("cta").classList.add("delay-1");
}, 3000, 2); //2 is the number of repition
* {
font-family:'Comfortaa'
}
.ad{
margin:0 auto;
overflow:hidden;
position:relative;
color:#3a3a3a;
background: #0E6AAD;
width:300px; height:250px;
background-size: 300px 250px;
}
.h1-background{
color:white;
text-align:center;
}
h1{
font-family:'Baloo';
position:relative;
padding:10px;
padding-bottom:0;
font-size:24px;
font-weight:normal;
margin:0;
z-index:1;
}
h2{
position:relative;
padding:0 10px;
font-size:16px;
z-index:1;
}
button{
padding:10px 20px;
font-size:12px;
background-color:#4285f4;
border:none;
color:white;
position:fixed;
cursor:pointer;
border-radius:50px;
width:180px;
left: 50%;
margin-left: -90px; /*half the width*/
z-index:9999;
top:210px;
}
.slide-up-fade-in{
animation: slide-up-fade-in ease 0.5s infinite;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: slide-up-fade-in ease 0.5s infinite;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: slide-up-fade-in ease 0.5s infinite;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: slide-up-fade-in ease 0.5s infinite;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: slide-up-fade-in ease 0.5s infinite;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
opacity:0;
opacity: 1\9;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes slide-up-fade-in{
0% {
opacity:0;
-moz-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes slide-up-fade-in {
0% {
opacity:0;
-webkit-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes slide-up-fade-in {
0% {
opacity:0;
-o-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes slide-up-fade-in {
0% {
opacity:0;
-ms-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
<div class="ad">
<div class="h1-background">
<h1 id="title" class="slide-up-fade-in">Title<h1>
<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>

try this:
.slide-up-fade-in{
animation: slide-up-fade-in ease 4s;
animation-iteration-count: infinite;
animation-delay: 0.25s;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.25s;}

I have found another way of doing this (looping 3 times):
.slide-up-fade-in{
animation: slide-up-fade-in ease 5s;
animation-iteration-count: 3;
animation-delay: 1.25s;
}
.delay-1{animation-delay: 1.25s;}
.delay-2{animation-delay: 1.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
10% {
opacity:1;
transform: translate(0px,0px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
for looping forever, replace animation0iteration-count from 3 to infinite

Related

Some problem with preloader on web page with JS

I am trying to create a simple preloader on web page but I have few mistakes.
JS code is not working.
This code should work before the web page is fully loaded and then disappear completely
Does someone know how to fix this problem or some another way or something else?
I would be grateful for any advice and any help.
function preloader() {
$(() =>{
setInterval(() => {
const p = ('.preloader');
p.css('opacity', '0');
}, 3000);
setInterval(
() => p.remove(),
parseInt(p.css('--duration')) * 1000
);
});
}
preloader();
body{
height: 100%;
width: 100%;
font-family: Verdana, sans-serif;
}
#loader-container{
min-height: 1080px;
min-width: 1920px;
z-index: 999999;
background-color: #000000;
opacity: 1;
transition: opacity .35s;
-webkit-transition: opacity .35s;
-moz-transition: opacity .35s;
-o-transition: opacity .35s;
}
#load {
position:absolute;
width:1200px;
height:36px;
left:40%;
top:40%;
margin-left:-300px;
overflow:visible;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
#load div {
font-size: 90px;
position:absolute;
width:20px;
height:36px;
opacity:0;
font-family:Helvetica, Arial, sans-serif;
animation:move 2s linear infinite;
-o-animation:move 2s linear infinite;
-moz-animation:move 2s linear infinite;
-webkit-animation:move 2s linear infinite;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
color:#35C4F0;
}
#load div:nth-child(2) {
animation-delay:0.2s;
-o-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
animation-delay:0.4s;
-o-animation-delay:0.4s;
-moz-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
animation-delay:0.6s;
-o-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
animation-delay:0.8s;
-o-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
animation-delay:1s;
-o-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-delay:1s;
}
#load div:nth-child(7) {
animation-delay:1.2s;
-o-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
}
#keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left: 41%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
#-moz-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
#-webkit-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
#-o-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
<div class="container preloader" id="loader-container">
<div id="load">
<div>G</div>
<div>N</div>
<div>I</div>
<div>D</div>
<div>A</div>
<div>O</div>
<div>L</div>
</div>
</div>

Have you included jQuery?
Do so, then something like this:
$(() => {
const p = $('.preloader');
setInterval(() => {
p.css('opacity', '0');
setInterval(() => {
p.remove();
}, 350)
}, 3000);
});

Animation of falling object not working on IE

I have a animtaion for falling objects inside a div. I tested it in all browsers and its works properly but on IE it doesn't animate at all. I ask for your help, thank you!
It works for both Desktop Size and in Mobile devices, it works on Google Chrome, Mozilla, Edge, Safarri, Opera except on IE
here is my SCSS code:
.falling__Object span {
display: inline-block;
z-index: 10000;
-webkit-animation: falling__Object 10s infinite linear;
-moz-animation: falling__Object 10s infinite linear;
&.leaves {
width: 5vw;
background: url(../img/section-countdown/leaf.png);
background-repeat: no-repeat;
background-size: 75%;
/* margin: -280px 84px 54px -34px;
#media screen and (min-width: 320px) and (max-width:500px) {
width: 5vwvw;
}*/
}
&.snow {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/snow.gif");
background-size: 70%;
background-repeat: no-repeat;
}
&.green-leaf {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/green-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
&.spring {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/spring-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
}
.falling__Object span:nth-child(1n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.falling__Object span:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
.falling__Object span:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
}
.falling__Object span:nth-child(3n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.falling__Object span:nth-child(7n+2) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.falling__Object span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.falling__Object span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
#-webkit-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
#-moz-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
and here is the script:
function getSeason() {
var currentMonth = new Date().getMonth() + 1;
if (currentMonth === 12 || currentMonth === 1 || currentMonth === 2) {
$(".falling__Object span").addClass("snow");
} else if (currentMonth >= 3 && currentMonth <= 5) {
$(".falling__Object span").addClass("spring");
} else if (currentMonth >= 6 && currentMonth <= 8) {
$(".falling__Object span").addClass("green-leaf");
} else if (currentMonth >= 9 && currentMonth <= 11) {
$(".falling__Object span").addClass("leaves");
}
return ""
}

Use the css properties compatible with ie11 (the un-prefixed) for animation, transform & keyframes
.falling__Object span {
display: inline-block;
z-index: 10000;
-webkit-animation: falling__Object 10s infinite linear;
-moz-animation: falling__Object 10s infinite linear;
animation: falling__Object 10s infinite linear;
&.leaves {
width: 5vw;
background: url(../img/section-countdown/leaf.png);
background-repeat: no-repeat;
background-size: 75%;
/* margin: -280px 84px 54px -34px;
#media screen and (min-width: 320px) and (max-width:500px) {
width: 5vwvw;
}*/
}
&.snow {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/snow.gif");
background-size: 70%;
background-repeat: no-repeat;
}
&.green-leaf {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/green-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
&.spring {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/spring-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
}
.falling__Object span:nth-child(1n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.falling__Object span:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.falling__Object span:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.falling__Object span:nth-child(3n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.falling__Object span:nth-child(7n+2) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.falling__Object span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.falling__Object span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
animation-delay: 8s;
}
#-webkit-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}
#-moz-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}
#keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}

Get original background image - JQuery

Hello I've created simple animation but I need to get background wheel when the current car leave and also get the background of the next car:
so if you click on wheels thumbnails the car wheels will be changed but I need when the car start leave I need to restore the original wheels:
Here my code
$('.slectWheel img').click(function (e) {
var currentWheel = $('.current .car__wheel').css('background-image');
e.preventDefault();
var getImgWheel = $(this).attr('src');
$('.car .car__wheel').css('background-image','url(' + getImgWheel + ')');
$('.current').addClass('whelrotateClick');
});
var $cars = $('.car');
$('.car-model').on('click', function () {
var index = $(this).data('index');
var $current = $cars.find('.current');
var $next = $('[data-car-index="' + index + '"]').parent();
$current.addClass('car--trans-out');
setTimeout(function () {
$('.car-image-container').removeClass('whelrotateClick');
$current.removeClass('current').removeClass('car--trans-out');
$next.addClass('current').addClass('car--trans-in');
setTimeout(function () {
$next.removeClass('car--trans-in');
}, 1000)
}, 1000);
})
.slectWheel{
cursor:pointer;
text-align:center;
}
.slectWheel img{
display:inline-block;
}
.car-image{
}
.car{
padding:40px 0;
}
.changeCarSelect{
display:none;
text-align:left;
}
.changeCarSelect span{
display:inline-block;
margin-right:4px;
font-size:14px;
}
.selectContainer {
width: 200px;
padding: 10px 5px;
display:inline-block;
margin-bottom:30px;
/*position:absolute;*/
font-size: 14px;
border:1px solid rgba(246, 246, 246, 0.89);
outline:none;
cursor:pointer;
}
.selectContainer option{
padding:20px 2px;
}
.car div[class^='col']{
padding:5px;
}
.car .car-model{
width:100%;
margin-bottom:30px;
cursor:pointer;
}
.car .car-model h3{
margin:0;
padding:15px 10px;
background-color
color:#333;
font-family:"Raleway", Arial, Tahoma;
font-weight:700;
font-size:18px;
text-align:center;
}
.car .car-relative{
position:relative;
width:100%;
}
.car-image-container{
position: absolute;
left: 100%;
overflow: hidden;
/*border:1px solid;*/
}
.car-image-container img{
margin:auto;
}
.current{
position: relative;
left: 0;
}
/*.current .current{
left: 0;
}*/
.car .car-image .car__wheel{
width:99px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.car .car-image .car__wheel.left{
background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
top: 87px;
left: 350px;
}
.car .car-image .car__wheel.right{
background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
top: 87px;
right: 319px;
}
.car--trans-in .car__wheel{
animation: roll-in 400s ease-out;
}
.car--trans-out .car__wheel{
animation: roll-out 400s ease-out;
}
.car--trans-in .car-image{
animation: trans-in 1s ease-out;
animation-fill-mode: forwards;
-moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car-image{
animation: trans-out 1s ease-in;
animation-fill-mode: forwards;
-moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.car--trans-in .car__wheel{
animation: roll-in 1s ease-out;
-moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car__wheel{
animation: roll-out 1s ease-out;
-moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.car--trans-in .car-image img {
-moz-animation: bounce-in 1s ease-out;
-o-animation: bounce-in 1s ease-out;
-webkit-animation: bounce-in 1s ease-out;
animation: bounce-in 1s ease-out;
-moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car-image img {
animation: bounce-out 1s ease-in;
-moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
#keyframes trans-in {
0% {transform: translateX(150%);}
80% {transform: translateX(0%);}
100% {transform: translateX(0%);}
}
#keyframes trans-out {
0% {transform: translateX(0%);}
10% {transform: translateX(0%);}
80% {transform: translateX(-100%);}
100% {transform: translateX(-100%);}
}
#keyframes roll-in {
0% {transform: rotate(0deg);}
80% {transform: rotate(-720deg);}
100% {transform: rotate(-720deg);}
}
#keyframes roll-out {
0% {transform: rotate(0deg);}
100% {transform: rotate(-720deg);}
}
#keyframes bounce-in {
0% {transform: rotate(0deg);}
5.67% {transform: rotate(0deg);}
33% {transform: rotate(-0.5deg);}
77.52% {transform: rotate(-0.5deg);}
100% {transform: rotate(0deg);}
}
#keyframes bounce-out {
0% {transform: rotate(0deg);}
47.15% {transform: rotate(1deg);}
100% {transform: rotate(1deg);}
}
/*==============
Responsive Media Query
==============*/
/* ========================
Note3, Note2, SIII, S5, Lumia950, Nexus5, Nokia N9 : 360px * 640px
Iphone6: 375px * 667px
lg optimus l70, Nexus4: 384px * 640px
Nexus6, Nexus5X, Nexus6P: 412px * 732px
Iphone6Plus: 414px * 736px
======================== */
#media only screen and (min-width: 310px) and (max-width:320px) {
.car .car-image .car__wheel{
width:46px;
height:46px;
}
.car .car-image .car__wheel.left {
top: 41px;
left: 47px;
}
.car .car-image .car__wheel.right {
top:39px;
right:33px;
}
}
#media only screen and (min-width: 330px) and (max-width:360px) {
.car .car-image .car__wheel{
width:55px;
height:55px;
}
.car .car-image .car__wheel.left {
top: 44px;
left: 52px;
}
.car .car-image .car__wheel.right {
top: 44px;
right: 37px;
}
}
#media only screen and (min-width: 361px) and (max-width:375px) {
.car .car-image .car__wheel{
width:52px;
height:52px;
}
.car .car-image .car__wheel.left {
top: 48px;
left: 57px;
}
.car .car-image .car__wheel.right {
top: 48px;
right: 41px;
}
}
#media only screen and (min-width: 380px) and (max-width:384px) {
body{
background-color:red;
}
.car .car-image .car__wheel{
width:53px;
height:53px;
}
.car .car-image .car__wheel.left {
top: 50px;
left: 58px;
}
.car .car-image .car__wheel.right {
top: 50px;
right: 41px;
}
}
#media only screen and (min-width: 390px) and (max-width:414px) {
.car .car-image .car__wheel{
width:60px;
height:60px;
}
.car .car-image .car__wheel.left {
top: 52px;
left: 62px;
}
.car .car-image .car__wheel.right {
top: 52px;
right: 43px;
}
}
#media only screen and (min-width: 580px) and (max-width:600px) {
.car .car-image .car__wheel{
width:92px;
height:92px;
}
.car .car-image .car__wheel.left {
top: 77px;
left: 88px;
}
.car .car-image .car__wheel.right {
top: 77px;
right: 60px;
}
}
#media only screen and (min-width: 630px) and (max-width:640px) {
.car .car-image .car__wheel{
width:92px;
height:92px;
}
.car .car-image .car__wheel.left {
top: 84px;
left: 98px;
}
.car .car-image .car__wheel.right {
top: 84px;
right: 66px;
}
}
#media (max-width: 768px){
.changeCarSelect{
display:block;
}
.car-button{
display:none;
}
}
#media (min-width: 768px) and (max-width: 992px){
.car .car-image .car__wheel.left {
left:140px;
}
.car .car-image .car__wheel.right {
right: 108px;
}
}
#media (min-width: 992px) and (max-width: 1200px){
.car .car-image .car__wheel{
}
.car .car-image .car__wheel.left {
left:250px;
}
.car .car-image .car__wheel.right {
right: 216px;
}
}
.whelrotateClick .car__wheel{
animation-name:animation;
animation-duration:5s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
#keyframes animation {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
<div class="container">
<div class="changeCarSelect">
<span>Change Car</span>
<select class="selectContainer">
<option class="selectCar" data-index="1">
Car modal
</option>
<option class="selectCar" data-index="2">
Car modal
</option>
<option class="selectCar" data-index="3">
Car modal
</option>
</select>
</div>
<div class="car-button">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="car-model" data-index="1">
<h3>car modal</h3>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="car-model" data-index="2">
<h3>car modal</h3>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="car-model" data-index="3">
<h3>car modal</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="car-relative">
<div class="car-image-container current">
<div class="car-image" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/148992740561243.png')"></div>
<div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/148992740561243.png')"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/14899275127831.png')"></div>
<div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/14899275127831.png')"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/149030743068171.png')"></div>
<div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/149030743068171.png')"></div>
</div>
</div>
</div>
</div>
</div>
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
Please run code snippet in fullscreen

I think I have fixed it as you want...
Now when the car leaves, it leaves with the wheels it had when entering.
(I suppose new wheels must be paid!!! lol)
I absolutely didn't touch your HTML or CSS.
Here is the script working in this CodePen:
// Get wheels for all cars onload.
// It is an array of object (in case of two wheel model on the same car)
var carWheelArr=[];
$(".car-image").each(function(i){
var leftWheel = $(this).find(".car__wheel").eq(0).css("background-image");
var rightWheel = $(this).find(".car__wheel").eq(1).css("background-image");
carWheelArr[i] = {};
carWheelArr[i].left=leftWheel;
carWheelArr[i].right=rightWheel;
});
//console.log(JSON.stringify(carWheelArr));
// Change wheels handler.
$('.slectWheel img').click(function (e) {
console.log("Select wheel");
var currentWheel = $('.current .car__wheel').css('background-image');
e.preventDefault();
var getImgWheel = $(this).attr('src');
$(".current").find('.car__wheel').css('background-image','url(' + getImgWheel + ')');
$('.current').addClass('whelrotateClick');
});
// Change car handler
var $cars = $('.car');
$('.car-model').on('click', function () {
// Get current car.
var currentCar=$(document).find(".current");
// Get its car index (minus one to comply zero based array)
var currentCarIndex=parseInt($(document).find(".current").children().first().attr("data-car-index"))-1;
console.log("car#: "+currentCarIndex +" is leaving...");
// Reset wheels.
//console.log(carWheelArr[currentCarIndex].left);
currentCar.find(".left").css({"background-image":carWheelArr[currentCarIndex].left})
currentCar.find(".right").css({"background-image":carWheelArr[currentCarIndex].right})
var index = $(this).data('index');
var $current = $cars.find('.current');
var $next = $('[data-car-index="' + index + '"]').parent();
$current.addClass('car--trans-out');
setTimeout(function () {
$('.car-image-container').removeClass('whelrotateClick');
$current.removeClass('current').removeClass('car--trans-out');
$next.addClass('current').addClass('car--trans-in');
setTimeout(function () {
$next.removeClass('car--trans-in');
}, 1000)
}, 1000);
});

replace css animation without changing the position of the div

This is my code
https://jsfiddle.net/sameh0/hgk2uLfk/2/
I want to change the animation of rightleft when hovering over the div. However when I do that, the position of the div gets back first and then changes the animation which creates a bad interaction experience.
That being said I'm open to add any JS/JQuery code.
Currently when the div is hovered it's stopped in its initial position and the new animation bubble takes place.
MY GOAL IS :
to make the div stop at it's current position and the new animation bubble starts while the div is stopped .
and this is the code
HTML
<div class="circle"></div>
CSS
.circle{
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
position: absolute;
z-index: 100;
cursor: pointer;
top:25%;
left :28%;
width: 90px;
height: 90px;
-webkit-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) , bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
background-color:blue;
background-size: 80%;
}
.circle:hover{
background-color:red;
-webkit-animation: bubble, 0.8s infinite alternate cubic-bezier(0.46, 0.03, 1, 0.21) !important;
-moz-animation: bubble 0.8s infinite alternate cubic-bezier(0.46, 0.03, 1, 0.21) !important;
animation: bubble 0.8s infinite alternate cubic-bezier(0.46, 0.03, 1, 0.21) !important;
}
#-webkit-keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -30px;
margin-top: -30px;
}
}
#-moz-keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -30px;
margin-top: -30px;
}
}
#-ms-keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -30px;
margin-top: -30px;
}
}
#keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -30px;
margin-top: -30px;
}
}
#-webkit-keyframes bubble {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
#-moz-keyframes bubble {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
#-ms-keyframes bubble {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
#keyframes bubble {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}

How about the following code?
.circle{
background-color:blue;
animation:
rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),
bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
}
.circle:hover{
background-color:red;
animation:
rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),
bubble 0.8s infinite alternate cubic-bezier(0.46, 0.03, 1, 0.21);
animation-play-state: paused, running;
}
#keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -100px;
margin-top: -100px;
}
}
#keyframes bubble {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.1);
}
}
DEMO

https://jsfiddle.net/hgk2uLfk/10/
Updated
<div class="circle">
<div class="bubble"></div>
</div>
.circle{
position: absolute;
z-index: 100;
top:25%;
left :28%;
-webkit-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) , bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
}
.circle:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.bubble {
width: 90px;
height: 90px;
cursor: pointer;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background-color:blue;
background-size: 80%;
}
.bubble:hover{
background-color:red;
-webkit-animation: bubble, 0.8s infinite alternate cubic-bezier(0.46, 0.03, 1, 0.21) !important;
-moz-animation: bubble 0.8s infinite alternate cubic-bezier(0.46, 0.03, 1, 0.21) !important;
animation: bubble 0.8s infinite alternate cubic-bezier(0.46, 0.03, 1, 0.21) !important;
}
#-webkit-keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -30px;
margin-top: -30px;
}
}
#-moz-keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -30px;
margin-top: -30px;
}
}
#-ms-keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -30px;
margin-top: -30px;
}
}
#keyframes rightleft {
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-left: -30px;
margin-top: -30px;
}
}
#-webkit-keyframes bubble {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
#-moz-keyframes bubble {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
#-ms-keyframes bubble {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
#keyframes bubble {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}

add this code to the previous code and it will work
.circle:hover {
animation-name: rightleft;
animation-play-state: paused;
}

How to create custom CSS3 loading circle?

I want to create CSS3 loading circle like this one:
the inner circle will grow using timer.
the problem what is the technique that I can use to grow the inner circle like this way?
I have this CSS code:
.circle {
width:100px;
height:100px;
border-radius:50px;
background:#fff;
}
.circle is just a div
the outer circle can be used as background image because it will be static. it will never change, only the inner one will change according to timer.

HTML
In this first example, create only two div and thanks to the border-radius property, they will take the circle shape.
<div class="ball"></div>
<div class="ball1"></div>
CSS
For the CSS style is very simple, just play with the parameters for the graphic you want, as regards the animation simply use the transform:rotateproperty.
.ball {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoff .5s infinite linear;
-webkit-animation: spinoff .5s infinite linear;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-moz-keyframes spinoff {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-360deg);
};
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
#-webkit-keyframes spinoff {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
};
}
Second Example CSS3 Loading Animation Loop
HTML
The second example is the same as the precedent for the markup, the main difference you'll find it in the CSS.
<div class="circle"></div>
<div class="circle1"></div>
CSS
Simply in this example we are going to act on the rotation, and more we insert an animation that will allow us to have an pulse effect.
This effect will be active only in the first circle.
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
Third Example CSS3 Loading Animation Loop
HTML
In this latest example we find a simple loop that is animated thanks to the transform:scale property.
The markup is longer than its predecessors, but this can vary according to the blocks you want to insert.
<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>
CSS
Here the style is much easier to handle since we're going to take to apply the effect to animation:delay property of each block.
.barlittle {
background-color: #2187e7;
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
border-left: 1px solid #111;
border-top: 1px solid #111;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
width: 10px;
height: 10px;
float: left;
margin-left: 5px;
opacity: 0.1;
-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);
-moz-animation: move 1s infinite linear;
-webkit-animation: move 1s infinite linear;
}
#block_1 {
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
#block_2 {
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#block_3 {
-moz-animation-delay: .2s;
-webkit-animation-delay: .2s;
}
#block_4 {
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#block_5 {
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
#-moz-keyframes move {
0% {
-moz-transform: scale(1.2);
opacity: 1;
}
100% {
-moz-transform: scale(0.7);
opacity: 0.1;
};
}
#-webkit-keyframes move {
0% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(0.7);
opacity: 0.1;
};
}
Conclusion
I hope that with this tutorial you learned how to create simple animations loop using only the CSS3 properties.

<style>
#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:#FFFFFF;
height:23px;
width:23px;
-moz-border-radius:12px;
-moz-animation-name:f_fadeG;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:12px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:12px;
-ms-animation-name:f_fadeG;
-ms-animation-duration:1.04s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:12px;
-o-animation-name:f_fadeG;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:12px;
animation-name:f_fadeG;
animation-duration:1.04s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#frotateG_01{
left:0;
top:52px;
-moz-animation-delay:0.39s;
-webkit-animation-delay:0.39s;
-ms-animation-delay:0.39s;
-o-animation-delay:0.39s;
animation-delay:0.39s;
}
#frotateG_02{
left:15px;
top:15px;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}
#frotateG_03{
left:52px;
top:0;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}
#frotateG_04{
right:15px;
top:15px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
}
#frotateG_05{
right:0;
top:52px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
}
#frotateG_06{
right:15px;
bottom:15px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
}
#frotateG_07{
left:52px;
bottom:0;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
}
#frotateG_08{
left:15px;
bottom:15px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
}
#-moz-keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
#-webkit-keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
#-ms-keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
#-o-keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
#keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
</style>
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01">
</div>
<div class="f_circleG" id="frotateG_02">
</div>
<div class="f_circleG" id="frotateG_03">
</div>
<div class="f_circleG" id="frotateG_04">
</div>
<div class="f_circleG" id="frotateG_05">
</div>
<div class="f_circleG" id="frotateG_06">
</div>
<div class="f_circleG" id="frotateG_07">
</div>
<div class="f_circleG" id="frotateG_08">
</div>
</div>
To create such Loader, you may try http://cssload.net/

We Keep Coding

JavaScript is the programming language of the Web.

Repeating the whole css sequence in loop - javascript

try this: .slide-up-fade-in{ animation: slide-up-fade-in ease 4s; animation-iteration-count: infinite; animation-delay: 0.25s; } .delay-1{animation-delay: 0.25s;} .delay-2{animation-delay: 0.25s;}

Related

Some problem with preloader on web page with JS

Animation of falling object not working on IE

Get original background image - JQuery

replace css animation without changing the position of the div

How to create custom CSS3 loading circle?

Categories

Resources