Get original background image - JQuery - javascript

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

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

Repeating the whole css sequence in loop

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

Adding a day/night cycle for scrolling clouds with smooth color transitions

I have got the scrolling clouds but I need a dawn/dusk and day/night cycle by detecting the system clock. I'm not sure how to detect system time with html or css.
I tried transitions with a delay but its not working.
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#clouds {
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width: 200px;
height: 60px;
background-color: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
.x1 {
left: -250px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: moveclouds 120s linear infinite;
-moz-animation: moveclouds 120s linear infinite;
-o-animation: moveclouds 120s linear infinite;
}
.x2 {
right: 70px;
top: -100px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7;
-webkit-animation: moveclouds 140s linear infinite;
-moz-animation: moveclouds 140s linear infinite;
-o-animation: moveclouds 140s linear infinite;
}
.x3 {
left: -550px;
top: -200px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.8;
-webkit-animation: moveclouds 150s linear infinite;
-moz-animation: moveclouds 150s linear infinite;
-o-animation: moveclouds 150s linear infinite;
}
.x4 {
left: 400px;
top: -250px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.75;
-webkit-animation: moveclouds 100s linear infinite;
-moz-animation: moveclouds 100s linear infinite;
-o-animation: moveclouds 100s linear infinite;
}
.x5 {
left: -750px;
top: -250px;
-webkit-transform: scale(0.47);
-moz-transform: scale(0.47);
transform: scale(0.47);
opacity: 0.8;
-webkit-animation: moveclouds 110s linear infinite;
-moz-animation: moveclouds 110s linear infinite;
-o-animation: moveclouds 110s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
What I'm trying to achieve:
At 5.30PM (as on local system): transition from #c9dbe9 to #E0DE3F
At 6.30PM : transition from #E0DE3F to #323232
At 5.30AM : transition from #323232 to #E0DE3F
At 7.00AM : transition from #E0DE3F to #c9dbe9
Please check out the demo above, a similar demo would be greatly appreciated, a single transition detecting the system time would be enough, I'll take care of the rest.
Also, is it possible to loop the cloud animation again before all the clouds have floated past the screen? There's a gap where the animation waits till all the clouds have floated past the screen, before starting up again.

Try this
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
var time=h+':'+m
if(h == 17){
if(m > 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
}
else if(h > 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
else if(h == 18){
if(m > 30 ){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #323232 0%, #fff 100%)'
})
}
}
else if(h > 18){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #323232 0%, #fff 100%)'
})
}
else if(h == 5){
if(m >= 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
}
else if(h > 5 && h < 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
else if(h == 6){
if(m >= 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%)'
})
}
}
else if(h >6 && h < 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%)'
})
}
*{ margin: 0; padding: 0;}
body {
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width: 200px; height: 60px;
background-color: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.x1 {
left: -250px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: moveclouds 120s linear infinite;
-moz-animation: moveclouds 120s linear infinite;
-o-animation: moveclouds 120s linear infinite;
}
.x2 {
right:70px; top:-100px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7;
-webkit-animation: moveclouds 140s linear infinite;
-moz-animation: moveclouds 140s linear infinite;
-o-animation: moveclouds 140s linear infinite;
}
.x3 {
left: -550px; top: -200px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.8;
-webkit-animation: moveclouds 150s linear infinite;
-moz-animation: moveclouds 150s linear infinite;
-o-animation: moveclouds 150s linear infinite;
}
.x4 {
left: 400px; top: -250px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.75;
-webkit-animation: moveclouds 100s linear infinite;
-moz-animation: moveclouds 100s linear infinite;
-o-animation: moveclouds 100s linear infinite;
}
.x5 {
left: -750px; top: -250px;
-webkit-transform: scale(0.47);
-moz-transform: scale(0.47);
transform: scale(0.47);
opacity: 0.8;
-webkit-animation: moveclouds 110s linear infinite;
-moz-animation: moveclouds 110s linear infinite;
-o-animation: moveclouds 110s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>

You can set a standard CSS animation, and then sync it with the clock using animation delay.
The delay that you need to set is equal, in negative, to the amount of time that has elapsed.
Since showing this on a day basis is quite boring, I have set an example that cycles in one minute, so it is using the seconds. To show that it is accurate, I am showing also the current second on the demo
window.onload = function () {
var date = new Date();
var sec = - date.getSeconds();
var ele = document.getElementById ("test");
ele.style.animationDelay = sec + 's';
setInterval ( function () {
var date = new Date();
var ele = document.getElementById ("time");
ele.innerText = date.getSeconds();
}, 1000);
}
#test {
background: radial-gradient(circle at 4% 4%, yellow 30px, transparent 25px),
radial-gradient(circle at 4% 92%, white 30px, transparent 25px),
linear-gradient(to top, black 0%, gray 20%, orange 40%, orange 60%, lightblue 80%, blue 100%);
background-size: 2000% 2000%;
background-repeat: no-repeat;
background-position: 0% 0%;
height: 200px;
width: 300px;
animation: anim 30s infinite alternate;
}
#keyframes anim {
0% {background-position: 0% 100%;}
100% {background-position: 0% 0%;}
}
#time {
width: 200px;
height: 100px;
left: 400px;
position: absolute;
top: 0px;
font-size: 60px;
}
<div id="test"></div>
<div id="time"></div>
The second 0 is midnight, and the second 30 is noon.
And there is the sun and the moon, too ...

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/

Categories