We Keep Coding

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

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

How to hide the div on click through animation css

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

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

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

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

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

Keep div static when other appears

I have a jsfiddle as follows:
http://jsfiddle.net/aritro33/uX7HG/
And I have a problem that when you hit the compose button, the post that appears gets pushed down slightly, but noticeably, by the arrangement of colors that pops up seconds later. How do I keep the post from moving as the arrangement of colors pops up?
Thanks!
HTML:
<div id="red" class = "color"></div>
<div id="orange" class = "color"></div>
<div id="yellow" class = "color"></div>
<div id="green" class = "color"></div>
<div id="turquoise" class = "color"></div>
<div id="blue" class = "color"></div>
<div id="purple" class = "color"></div>
<div id="gray" class = "color"></div>
<div id="composeheader">
<input type="text" id="secondspan" value="Write Header Here:" />
<div id = "sidebarhex"></div>
<div id = "taghex"><span id = "withhex" contenteditable = "true">#2AC0A3</span></div>
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>
</div>
CSS:
#red {
background-color: #2ac0a3;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
position: relative;
bottom: 220px;
left: 365px;
}
#orange {
background-color: #25ac92;
position:relative;
bottom:236px;
left: 405px;
}
#yellow {
position: relative;
bottom: 252px;
left: 445px;
background-color:#219982;
}
#green {
position: relative;
left: 485px;
bottom: 268px;
background-color: #1d8672;
}
#turquoise {
position: relative;
left: 525px;
bottom: 284px;
background-color: #197361;
}
#blue {
position: relative;
left: 565px;
bottom: 300px;
background-color: #156051;
}
#purple {
position: relative;
left: 605px;
bottom: 316px;
background-color: #104c41;
}
#gray {
position: relative;
left: 645px;
bottom: 332px;
background-color: #0c3930;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#composeheader {
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 320px;
left: 365px;
color: white;
}
#secondspan {
color: white;
font-family:'Roboto';
font-size: 40px;
position: relative;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
left: 15px;
top: 10px;
}
#body {
min-height: 100px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 365px;
bottom: 320px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#thirdspan {
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
#sidebarhex{
height: 30px;
width: 7px;
background-color: #156051;
position: relative;
left: 500px;
bottom: 30px;
}
#taghex{
height: 30px;
width: 80px;
background-color: #219982;
position: relative;
left: 420px;
bottom: 60px;
}
#withhex{
font-family: 'Roboto';
position: relative;
top: 4px;
left: 9px;
border: 0px solid transparent;
outline: none;
}
.color{
height: 16px;
width: 40px;
}
#red.active{
height: 16px;
width: 45px;
z-index: 1;
border: 3px solid white;
position: relative;
bottom: 218px;
}
#orange.active{
height: 16px;
width: 45px;
z-index: 1;
border: 3px solid white;
position: relative;
bottom: 233px;
}
#red.orangeselected{
position: relative;
bottom: 215px;
}
Animation CSS:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
JS:
$('#red').click(function(){
$('#red').addClass('active');
$('#red').removeClass('orangeselected');
$('#orange').removeClass('active');
});
$('#orange').click(function(){
$('#orange').addClass('active');
$('#red').removeClass('active');
$('#red').addClass('orangeselected');
});
$('#sidebarhex').fadeTo(0,1);
$('#thecolor').addClass('box animated bounceInDown');
$('.bubble').addClass('box animated bounceInDown');
$('#composeheader').addClass('box animated bounceInDown');
$('#body').addClass('box animated bounceInDown');
setTimeout(function () {
setTimeout(function () {
$('#red').fadeTo(0, 400);
$('#orange').fadeTo(0, 400);
$('#yellow').fadeTo(0, 400);
$('#green').fadeTo(0, 400);
$('#turquoise').fadeTo(0, 400);
$('#blue').fadeTo(0, 400);
$('#purple').fadeTo(0, 400);
$('#gray').fadeTo(0, 400);
}, 400);
$('#red').addClass('box animated bounceInUp');
$('#orange').addClass('box animated bounceInUp');
$('#yellow').addClass('box animated bounceInUp');
$('#green').addClass('box animated bounceInUp');
$('#turquoise').addClass('box animated bounceInUp');
$('#blue').addClass('box animated bounceInUp');
$('#purple').addClass('box animated bounceInUp');
$('#gray').addClass('box animated bounceInUp');
}, 500);
setTimeout(function(){
$('#red').addClass('active');
}, 1050);