We Keep Coding

Getting Top/Right values ​from a css-animated element

I'm trying to get the Top and Right values from an element being rotated by a CSS animation, for this I am using the following code:
HTML:
<div id="ball1"> </div>
CSS:
#keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#ball1 {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10;
height: 10;
border-radius: 10px;
}
Javascript:
console.log(window.getComputedStyle(document.getElementById("ball1"), null).top);
console.log(window.getComputedStyle(document.getElementById("ball1"), null).right);
However it returns a value of 0px, I wanted to get the value from Right and Top as if I was manually setting them (and not by the transform animation).
If this is not possible, is there a way to simulate a "circle" rotation and return the right/top values without using the transform?
ie:
https://66.media.tumblr.com/fb22b61bcbca3785a515e86c2276451b/tumblr_inline_pmimnjEvbK1v6q8wn_1280.gif?fbclid=IwAR2zjgE0hfB8emWOg0f6TOcQb8DWGbEvu9IQOr92fMq4HmMKjiAQRQzLmI0

Use getBoundingClientRect():
const ball = document.getElementById("ball");
setInterval(() => {
const rect = ball.getBoundingClientRect();
console.log(rect.top, rect.right);
}, 300);
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#ball {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
<div id="ball"></div>

Here is an approximation using top/left. The trick is to animate each property individually alternating the ease function to simulate the circular path:
.box {
width:100px;
height:100px;
position:relative;
}
#ball1 {
animation:
Atop 2.5s infinite,
Aleft 2.5s infinite;
position: absolute;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
#keyframes Atop {
0%,50%,100% {
top:50%;
animation-timing-function: ease-out;
}
25% {
top:0%;
animation-timing-function: ease-in;
}
75% {
top:100%;
animation-timing-function: ease-in;
}
}
#keyframes Aleft {
0%,100% {
left:0;
animation-timing-function: ease-in;
}
25%,75% {
left:50%;
animation-timing-function: ease-out;
}
50% {
left:100%;
animation-timing-function: ease-in;
}
}
<div class="box">
<div id="ball1"> </div>
</div>

Restart CSS3 animation using Javascript

I'm creating a CSS3/HTML5 banner ad and want to loop the animations over once they're all complete. I know there's a method to check with Javascript to check if a particular animation has ended, however I cannot figure out how to then restart the animations from all of their start points.
Essentially I have 3 'frames' with different information, each one will fade in and then fade back out, to be replaced with the next frame - once the last frame has faded back out, I want the animations to start over again. Doing this solely with CSS3 is way too tricky, because the timings of the animations and points in which the opacity is set to 0 have to be different for each animation.
As you can see from the JSFiddle, it plays once, then stops which is great, now I just need to re-trigger the animation once click_through2 finishes executing the animation.
JSFiddle
.test {
height: 250px;
position: relative;
width: 300px;
overflow: hidden;
}
.test div, .test a, .logo, .sfv2 {
position: absolute;
}
.title {
bottom: 45px;
left: 5px;
right: 5px;
}
.title h2 {
color: #fff;
font-family: Helvetica,arial,sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1;
margin: 0;
text-align: center;
}
.click_through {
background-color: #fff200;
border-radius: 5px;
bottom: 12px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
color: #ce1e25;
font-family: Helvetica,arial,sans-serif;
font-size: 14px;
font-weight: 700;
left: 0;
line-height: 1;
margin: 0 auto;
padding: 5px;
right: 0;
text-align: center;
width: 70px;
text-decoration: none;
}
.click_through1 {
animation: tbio 7s ease-out 0s both;
-moz-animation: tbio 7s ease-out 0s both;
-webkit-animation: tbio 7s ease-out 0s both;
-ms-animation: tbio 7s ease-out 0s both;
-o-animation: tbio 7s ease-out 0s both;
}
.click_through2 {
animation: tbio 7s ease-out 10s both;
-moz-tbio tbio 7s ease-out 10s both;
-webkit-tbio tbio 7s ease-out 10s both;
-ms-tbio tbio 7s ease-out 10s both;
-o-tbio tbio 7s ease-out 10s both;
width: 80px;
}
.logo {
top: 8px;
left: 8px;
}
.title1 {
animation: ltrio 6s ease 0s both;
-moz-animation: ltrio 6s ease 0s both;
-webkit-animation: ltrio 6s ease 0s both;
-ms-animation: ltrio 6s ease 0s both;
-o-animation: ltrio 6s ease 0s both;
}
.title2, .title3 {
opacity: 0;
}
.title2 {
animation: ltrio 6s ease 5.5s both;
-moz-animation: ltrio 6s ease 5.5s both;
-webkit-animation: ltrio 6s ease 5.5s both;
-ms-animation: ltrio 6s ease 5.5s both;
-o-animation: ltrio 6s ease 5.5s both;
}
.title3 {
animation: ltrio 6s ease 10s both;
-moz-nimation: ltrio 6s ease 10s both;
-webkit-nimation: ltrio 6s ease 10s both;
-ms-onimation: ltrio 6s ease 10s both;
-o-nimation: ltrio 6s ease 10s both;
}
.sfv2 {
right: 12px;
top: 34px;
animation: fio 6s ease 11s both;
-moz-animation: fio 6s ease 11s both;
-webkit-animation: fio 6s ease 11s both;
-ms-animation: fio 6s ease 11s both;
-o-animation: fio 6s ease 11s both;
}
#keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes ltrio {
0% {
-ms-transform: translateY(-350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
#-o-keyframes ltrio {
0% {
-o-transform: translateX(-350px);
opacity: 0;
}
25% {
-o-transform: translateX(0);
opacity: 1;
}
75% {
-o-transform: translateX(0);
opacity: 1;
}
100% {
-o-transform: translateX(350px);
opacity: 0;
}
}
#keyframes tbio {
0% {
transform: translateY(350px);
opacity: 0;
}
25% {
transform: translateY(0);
opacity: 1;
}
75% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(350px);
opacity: 0;
}
}
#-moz-keyframes tbio {
0% {
-moz-transform: translateY(350px);
opacity: 0;
}
25% {
-moz-transform: translateY(0);
opacity: 1;
}
75% {
-moz-transform: translateY(0);
opacity: 1;
}
100% {
-moz-transform: translateY(350px);
opacity: 0;
}
}
#-webkit-keyframes tbio {
0% {
-webkit-transform: translateY(350px);
opacity: 0;
}
25% {
-webkit-transform: translateY(0);
opacity: 1;
}
75% {
-webkit-transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(350px);
opacity: 0;
}
}
#-ms-keyframes tbio {
0% {
-ms-transform: translateY(350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
#-o-keyframes tbio {
0% {
-o-transform: translateY(350px);
opacity: 0;
}
25% {
-o-transform: translateY(0);
opacity: 1;
}
75% {
-o-transform: translateY(0);
opacity: 1;
}
100% {
-o-transform: translateY(350px);
opacity: 0;
}
}
#keyframes fio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="test">
<img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg">
<div class="title title1">
<h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2>
</div>
<div class="title title2">
<h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2>
</div>
<div class="title title3">
<h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2>
</div>
<a class="click_through click_through1" href="/">View here</a>
<a class="click_through click_through2" href="/">Learn more</a>
</div>

You could check for the end of the animation by responding to the endanimation event (of which there are several browser-dependent variants), reloading the relevant nodes, and repeating the whole process. Note I applied a factor 10 to the speed of the animations so you can see the effect faster:
// Define a function that listens to all prefix variants of endanimation events:
function whenAnimationEnd(element, callback) {
element.addEventListener('animationend', callback, false);
element.addEventListener('webkitAnimationEnd', callback, false);
element.addEventListener('oanimationend', callback, false);
element.addEventListener('MSAnimationEnd', callback, false);
}
(function repeat() {
whenAnimationEnd(document.querySelector('.click_through2'), function(e) {
var container = document.querySelector('.ad_container');
var dupe = container.cloneNode(true);
container.parentNode.replaceChild(dupe, container);
repeat();
});
}());
.ad_container {
height: 250px;
position: relative;
width: 300px;
overflow: hidden;
}
.ad_container div, .ad_container a, .logo, .sfv2 {
position: absolute;
}
.title {
bottom: 45px;
left: 5px;
right: 5px;
}
.title h2 {
color: #fff;
font-family: Helvetica,arial,sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1;
margin: 0;
text-align: center;
}
.click_through {
background-color: #fff200;
border-radius: 5px;
bottom: 12px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
color: #ce1e25;
font-family: Helvetica,arial,sans-serif;
font-size: 14px;
font-weight: 700;
left: 0;
line-height: 1;
margin: 0 auto;
padding: 5px;
right: 0;
text-align: center;
width: 70px;
text-decoration: none;
}
.click_through1 {
animation: tbio 0.7s ease-out 0s both;
-moz-animation: tbio 0.7s ease-out 0s both;
-webkit-animation: tbio 0.7s ease-out 0s both;
-ms-animation: tbio 0.7s ease-out 0s both;
-o-animation: tbio 0.7s ease-out 0s both;
}
.click_through2 {
animation: tbio 0.7s ease-out 1s both;
-moz-tbio tbio 0.7s ease-out 1s both;
-webkit-tbio tbio 0.7s ease-out 1s both;
-ms-tbio tbio 0.7s ease-out 1s both;
-o-tbio tbio 0.7s ease-out 1s both;
width: 80px;
}
.logo {
top: 8px;
left: 8px;
}
.title1 {
animation: ltrio 0.6s ease 0s both;
-moz-animation: ltrio 0.6s ease 0s both;
-webkit-animation: ltrio 0.6s ease 0s both;
-ms-animation: ltrio 0.6s ease 0s both;
-o-animation: ltrio 0.6s ease 0s both;
}
.title2, .title3 {
opacity: 0;
}
.title2 {
animation: ltrio 0.6s ease 0.55s both;
-moz-animation: ltrio 0.6s ease 0.55s both;
-webkit-animation: ltrio 0.6s ease 0.55s both;
-ms-animation: ltrio 0.6s ease 0.55s both;
-o-animation: ltrio 0.6s ease 0.55s both;
}
.title3 {
animation: ltrio 0.6s ease 1s both;
-moz-nimation: ltrio 0.6s ease 1s both;
-webkit-nimation: ltrio 0.6s ease 1s both;
-ms-onimation: ltrio 0.6s ease 1s both;
-o-nimation: ltrio 0.6s ease 1s both;
}
.sfv2 {
right: 12px;
top: 34px;
animation: fio 0.6s ease 1.1s both;
-moz-animation: fio 0.6s ease 1.1s both;
-webkit-animation: fio 0.6s ease 1.1s both;
-ms-animation: fio 0.6s ease 1.1s both;
-o-animation: fio 0.6s ease 1.1s both;
}
#keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes ltrio {
0% {
-ms-transform: translateY(-350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
#-o-keyframes ltrio {
0% {
-o-transform: translateX(-350px);
opacity: 0;
}
25% {
-o-transform: translateX(0);
opacity: 1;
}
75% {
-o-transform: translateX(0);
opacity: 1;
}
100% {
-o-transform: translateX(350px);
opacity: 0;
}
}
#keyframes tbio {
0% {
transform: translateY(350px);
opacity: 0;
}
25% {
transform: translateY(0);
opacity: 1;
}
75% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(350px);
opacity: 0;
}
}
#-moz-keyframes tbio {
0% {
-moz-transform: translateY(350px);
opacity: 0;
}
25% {
-moz-transform: translateY(0);
opacity: 1;
}
75% {
-moz-transform: translateY(0);
opacity: 1;
}
100% {
-moz-transform: translateY(350px);
opacity: 0;
}
}
#-webkit-keyframes tbio {
0% {
-webkit-transform: translateY(350px);
opacity: 0;
}
25% {
-webkit-transform: translateY(0);
opacity: 1;
}
75% {
-webkit-transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(350px);
opacity: 0;
}
}
#-ms-keyframes tbio {
0% {
-ms-transform: translateY(350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
#-o-keyframes tbio {
0% {
-o-transform: translateY(350px);
opacity: 0;
}
25% {
-o-transform: translateY(0);
opacity: 1;
}
75% {
-o-transform: translateY(0);
opacity: 1;
}
100% {
-o-transform: translateY(350px);
opacity: 0;
}
}
#keyframes fio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="ad_container">
<img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg">
<div class="title title1">
<h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2>
</div>
<div class="title title2">
<h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2>
</div>
<div class="title title3">
<h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2>
</div>
<a class="click_through click_through1" href="/">View here</a>
<a class="click_through click_through2" href="/">Learn more</a>
</div>

Use a setTimeout and try setting the animation property to something else and then set it to the classname again so that it restarts the animation.
Something like:
setTimeout(function(){
document.querySelector('.someclass').classList.remove("run-animation").classList.add("run-animation");
}, 1000)

Remove the class to which the animation is assigned to and add it again (maybe with timeout) and the animation starts again.

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 ...

Bouncing effect using css3 keyframes animation

I am trying bouncing effect using css3 key-frame animation.
here is fiddle link: click
Background of box is changing but my requirement is to give bouncing effect to background image not background color.
What exactly I need: A bouncing(jumping) teddy on trampoline with two states:
(1. with arms up, 2. with arms down) while jumping.
Any ideas how to achieve it? Thank you!

I got solution for this:
.margin{
margin-top:200px;
}
}
/* keyframes definition for WebKit browsers */
#-webkit-keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#-webkit-keyframes bounce {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
-webkit-animation-timing-function: ease-in;
}
}
#-webkit-keyframes bounce1 {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
-webkit-animation-timing-function: ease-in;
}
}
/* keyframes definition for other browsers */
#keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#keyframes bounce {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
animation-timing-function: ease-in;
}
}
#keyframes bounce1 {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
animation-timing-function: ease-in;
}
}
/* styles for the stage and animated elements */
#traveler {
position: absolute;
width: 75px;
height: 100px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration:2.8s;
animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2.8s;
}
#bouncer {
position: absolute;
width: 75px;
z-index:10;
height: 100px;
border-radius: 10px;
/*background: url(../img/jump.png) no-repeat;*/
background:green;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
#bouncer2 {
position: absolute;
z-index:11;
width: 75px;
height: 100px;
border-radius: 10px;
/*background: url(../img/pyonpyon.png) no-repeat;*/
background:red;
-webkit-animation-name: bounce1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce1;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
<div class="margin">
<div id="traveler">
<div id="bouncer"> </div>
<div id="bouncer2"> </div>
</div>
</div>
Fiddle example: https://jsfiddle.net/Sharan_thethy/eyjkpy8u/
Thank you

div hide and show in loop

How can I create a Road divider animation with one animating after another immediately? please find the following link for issue example
http://jsfiddle.net/shantnuraj/36XeK/1/
HTML:
<div id="tech-slideshow">
<div id="tech-slideshow-1" class="tech-slideshow-1">dfsd</div>
<div id="tech-slideshow-2" class="tech-slideshow-1">dfs</div>
<div id="tech-slideshow-3" class="tech-slideshow-1">dfsd</div>
<div id="tech-slideshow-4" class="tech-slideshow-1">dfs</div>
<div id="tech-slideshow-5" class="tech-slideshow-1">fsd</div>
<div id="tech-slideshow-6" class="tech-slideshow-1">dfs</div>
</div>
CSS:
.devider-marque img.devider {
margin-top: 0px;
}
#tech-slideshow {
height: 500px;
position: absolute;
overflow: hidden;
left: 50%;
width: 50px;
bottom: 0;
}
#tech-slideshow > div {
width: 50px;
background:#000;
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#tech-slideshow-1 {
margin-top: -200px;
-webkit-animation: moveSlideshow1 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-2 {
margin-top: -400px;
-webkit-animation: moveSlideshow2 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-3 {
margin-top: -600px;
-webkit-animation: moveSlideshow3 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-4 {
margin-top: -800px;
-webkit-animation: moveSlideshow4 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-5 {
margin-top: -1000px;
-webkit-animation: moveSlideshow5 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-6 {
margin-top: -1200px;
-webkit-animation: moveSlideshow6 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#-moz-keyframes moveSlideshow1 {
0% {top:0; height:150px;}
10% {top:20;height:150px;}
100% {top:1200px;height:150px;}
}
#-webkit-keyframes moveSlideshow1 {
0% {top:0; height:150px;}
10% {top:20;height:150px;}
100% {top:1200px;height:150px;}
}

Hello Here is your answer with fiddle
use transition-delay instead of margin-top
#Anydiv {
animation-name: moveSlideshow1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1s; [ adding transition delay +1 to next div in loop will make it smoother ]
}
i have just edited fiddle in hurry so i have added animation parameter seperately you can use shorthand :)
Fiddle http://jsfiddle.net/krunalp1993/36XeK/4/
Hope it helps you :)

You can control the speed by setting animation time value.
-webkit-animation: moveSlideshow6 3s linear infinite;
-moz-animation: moveSlideshow1 3s linear infinite;