How to control 3D CSS cube with controls

How to control 3D CSS cube with controls - javascript

I'm trying to control the cube with arrows (up, down, left, right arrow controls). The problem i'm having is nothing is going on when i press the arrows i'm not sure if it's a Javascript issue or CSS keyframe issue. Another problem i'm having is that once the cube rotates i cant get it to rotate in the same direction when the key is pressed again or keep it in state. No JQuery please. This is what i have tried:
window.addEventListener('load', function(){
let rotate = document.querySelectorAll('.rotate');
let container = document.querySelector('.container');
function rotLeft (key) {
element.animate(rotateLeft);
}
function rotRight (key) {
element.animate(rotateRight);
}
function rotUp (key) {
element.animate(rotateUp);
}
function rotDown (key) {
element.animate(rotateDown);
}
if (key.keyCode == "37"){
rotLeft();
}
else if (key.keyCode == "39"){
rotRight();
}
else if (key.keyCode == "38"){
rotUp();
}
else if (key.keyCode == "40"){
rotDown();
}
});
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-100px) rotateY( 90deg); }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); }
html, body {
height: 100%;
}
.side,
.container {
width: 160px;
height: 160px;
}
.side {
position: absolute;
height: 160px;
width: 160px;
border: 2px solid white;
}
.back {
transform: translateZ(-80px);
background-color: gold;
}
.left {
transform: translateX(-80px) rotateY(90deg);
background-color: gold;
}
.right {
transform: translateX(80px) rotateY(90deg);
background-color: gold;
}
.top {
transform: translateY(-80px) rotateX(90deg);
background-color: gold;
}
.bottom {
transform: translateY(80px) rotateX(90deg);
background-color: gold;
}
.front {
transform: translateZ(80px);
background-color: gold;
}
.container {
transform-style: preserve-3d;
}
.animate {
position: fixed;
top: 10px;
color: wheat;
display: flex;
}
.rotate {
padding: 30px;
background-color: lightgrey;
margin: 5px;
cursor: pointer;
border-radius: 50%;
color: black;
}
.rotateCube {
animation-duration: 1s;
animation-name: rotateLeft;
}
#keyframes rotateLeft {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,1,0,90deg);
}
}
#keyframes rotateRight {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,-1,0,-90deg);
}
}
#keyframes rotateUp {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(1,0,0,90deg);
}
}
#keyframes rotateDown {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,-1,0,-90deg);
}
}
<div id="rotateCube" class="cube">
<div class="back side">back</div>
<div class="left side">left</div>
<div class="right side">r</div>
<div class="top side">t</div>
<div class="bottom side">b</div>
<div class="front side">Front</div>
</div>
Thanks

In order to catch an arrow key event you need to use:
document.onkeydown = function(e) {
e = e || window.event;
console.log("keyCode is: " + e.keyCode);
};
I've added the code to the functions in order to rotate the cube (I've just added the class already defined in the css with js). This is the result:
let cube = document.getElementById("rotateCube");
function rotLeft() {
resetCube()
cube.className += " " + "show-left";
}
function rotRight() {
resetCube()
cube.className += " " + "show-right";
}
function rotUp() {
resetCube()
cube.className += " " + "show-top";
}
function rotDown() {
resetCube()
cube.className += " " + "show-bottom";
}
function resetCube() {
cube.className = "cube";
}
document.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == "37") {
rotLeft();
} else if (e.keyCode == "39") {
rotRight();
} else if (e.keyCode == "38") {
rotUp();
} else if (e.keyCode == "40") {
rotDown();
}
};
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-100px) rotateY( 90deg); }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); }
html, body {
height: 100%;
}
.side,
.container {
width: 160px;
height: 160px;
}
.side {
position: absolute;
height: 160px;
width: 160px;
border: 2px solid white;
}
.back {
transform: translateZ(-80px);
background-color: gold;
}
.left {
transform: translateX(-80px) rotateY(90deg);
background-color: gold;
}
.right {
transform: translateX(80px) rotateY(90deg);
background-color: gold;
}
.top {
transform: translateY(-80px) rotateX(90deg);
background-color: gold;
}
.bottom {
transform: translateY(80px) rotateX(90deg);
background-color: gold;
}
.front {
transform: translateZ(80px);
background-color: gold;
}
.container {
transform-style: preserve-3d;
}
.animate {
position: fixed;
top: 10px;
color: wheat;
display: flex;
}
.rotate {
padding: 30px;
background-color: lightgrey;
margin: 5px;
cursor: pointer;
border-radius: 50%;
color: black;
}
.rotateCube {
animation-duration: 1s;
animation-name: rotateLeft;
}
#keyframes rotateLeft {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,1,0,90deg);
}
}
#keyframes rotateRight {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,-1,0,-90deg);
}
}
#keyframes rotateUp {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(1,0,0,90deg);
}
}
#keyframes rotateDown {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,-1,0,-90deg);
}
}
<div id="rotateCube" class="cube">
<div class="back side">back</div>
<div class="left side">left</div>
<div class="right side">r</div>
<div class="top side">t</div>
<div class="bottom side">b</div>
<div class="front side">Front</div>
</div>

Related

How to fix animation glitch in mozilla firefox and edge?

When you click on the face of the cube, it turns this face to the user and the animation stops. When you click again, it smoothly returns to its original state. In Opera and Google Chrome , everything works fine. But in Mozilla and Edge there is a jump in the animation like on the gif below. What is the problem how to fix?
Here is the code for codpen and an example of correct work. https://codepen.io/RJDio/pen/rNVmaOo
Firefox
Edge
let open = false;
let changing = false;
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
side1.addEventListener('click', function() {
if (changing) {
return;
}
if (!open && !changing) {
open = true;
changing = true;
this.classList.add('open')
var compTransform = getComputedStyle(cube).getPropertyValue("transform");
cube.style.transform = compTransform;
cube.style.animation = 'none';
cube.classList.add("animateTop");
setTimeout(function() {
cube.style.removeProperty('transform');
}, 50);
setTimeout(function() {
changing = false;
}, 1640);
} else if (open && !changing) {
open = false;
changing = true;
setTimeout(function() {
cube.classList.remove("animateTop");
changing = false;
}, 4999);
cube.style.removeProperty('animation');
}
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
transition: 1.64s;
}
.closeLink {
color: #f7f7f7;
background-color: #333;
font-size: 20px;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube">
<div class="slide" id="side1"><a class="closeLink" href="">X</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>

Why counter is not working after one interval

I want to create a time down counter. I already created a counter but it is not working properly and how to reset animation of CSS after one interval.
There is the link of the jsfiddle: [https://jsfiddle.net/waleedGRT/x4rcj068/10/](https://jsfiddle.net/waleedGRT/x4rcj068/10/)
Thanks You in advance.

Not sure what exact functionality you're looking for, but this should get you past your problem. EDIT updated code as per OP response.
function counterA(valuea) {
var tempA = valuea;
setInterval(function() {
if (tempA < 1) {
window.history.go(0);
}
$('#time').text(tempA);
tempA--;
}, 1000);
}
$(document).ready(function() {
counterA(11);
});
.wrapper {
margin: 50px;
width: 300px;
height: 300px;
overflow: hidden;
position: relative
}
.right {
border: #3f85a3 solid 15px;
height: 180px;
width: 180px;
border-radius: 120px;
border-top-color: transparent;
border-left-color: transparent;
position: absolute;
transform: rotate(-45deg);
animation: rota2 12000ms linear;
-moz-animation: rota2 12000ms linear;
-o-animation: rota2 12000ms linear;
-webkit-animation: rota2 12000ms linear;
}
#keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-o-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-moz-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-webkit-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
.left {
border: #3f85a3 solid 15px;
height: 180px;
width: 180px;
border-radius: 120px;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
transform: rotate(315deg);
animation: rota 24000ms linear;
-o-animation: rota 24000ms linear;
-moz-animation: rota 24000ms linear;
-webkit-animation: rota 24000ms linear;
}
#keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#-o-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#moz-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#-webkit-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
.middle {
color: #0987bc;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 180px;
height: 180px;
left: 15px;
top: 15px;
border-radius: 150px;
position: relative;
z-index: 4;
}
.popover {
background: white;
width: 80px;
height: 162px;
position: absolute;
top: -3px;
left: -3px;
opacity: 0;
z-index: 2;
animation: popover 0ms linear;
}
#keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#time {
font-size: 30px;
}
#timer {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Round E&D</title>
</head>
<body>
<div>
<div class="wrapper">
<div class="right"></div>
<div class="left"></div>
<div class="middle">
<p id="counter"><br />
<span id="counter">
<div>
<span id="timer">
0:<span id="time">12</span>
</span>
</div>
</span>
</p>
</div>
<div class="popover"></div>
</div>
</div>
</body>
</html>

External javascript file does not load

I am trying to make a flip clock similar to https://codepen.io/blucube/pen/pgqRKr/ . The javascript is written as such that if the code runs then the page should display the current time with a flick on the seconds box which keep changing every second. However, the page doesn't display anything reason being the javascript file doesn't load. Here is my code:
function flipTo(digit, n) {
var current = digit.attr('data-num');
digit.attr('data-num', n);
digit.find('.front').attr('data-content', current);
digit.find('.back, .under').attr('data-content', n);
digit.find('.flap').css('display', 'block');
setTimeout(function() {
digit.find('.base').text(n);
digit.find('.flap').css('display', 'none');
}, 350);
}
function jumpTo(digit, n) {
digit.attr('data-num', n);
digit.find('.base').text(n);
}
function updateGroup(group, n, flip) {
var digit1 = $('.ten' + group);
var digit2 = $('.' + group);
n = String(n);
if (n.length == 1) n = '0' + n;
var num1 = n.substr(0, 1);
var num2 = n.substr(1, 1);
if (digit1.attr('data-num') != num1) {
if (flip) flipTo(digit1, num1);
else jumpTo(digit1, num1);
}
if (digit2.attr('data-num') != num2) {
if (flip) flipTo(digit2, num2);
else jumpTo(digit2, num2);
}
}
function setTime(flip) {
var t = new Date();
updateGroup('hour', t.getHours(), flip);
updateGroup('min', t.getMinutes(), flip);
updateGroup('sec', t.getSeconds(), flip);
}
$(document).ready(function() {
setTime(false);
setInterval(function() {
setTime(true);
}, 1000);
});
html {
height: 100%;
}
body {
height: 100%;
background: #85D8CE;
background: linear-gradient(135deg, #085078, #85D8CE);
}
.digit {
position: relative;
float: left;
width: 10vw;
height: 15vw;
background-color: #fff;
border-radius: 1vw;
text-align: center;
font-family: Oswald, sans-serif;
font-size: 11vw;
}
.base {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #333;
}
.flap {
display: none;
position: absolute;
width: 100%;
height: 50%;
background-color: #fff;
left: 0;
top: 0;
border-radius: 1vw 1vw 0 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
.flap::before {
content: attr(data-content);
position: absolute;
left: 50%;
}
.flap.front::before,
.flap.under::before {
top: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.flap.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flap.back::before {
top: 100%;
-webkit-transform: translate(-50%, -50%) rotateZ(180deg);
transform: translate(-50%, -50%) rotateZ(180deg);
}
.flap.over {
z-index: 2;
}
.flap.under {
z-index: 1;
}
.flap.front {
-webkit-animation: flip-down-front 300ms ease-in both;
animation: flip-down-front 300ms ease-in both;
}
.flap.back {
-webkit-animation: flip-down-back 300ms ease-in both;
animation: flip-down-back 300ms ease-in both;
}
.flap.under {
-webkit-animation: fade-under 300ms ease-in both;
animation: fade-under 300ms ease-in both;
}
#-webkit-keyframes flip-down-front {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: #fff;
color: #333;
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
background-color: #a6a6a6;
color: black;
}
}
#keyframes flip-down-front {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: #fff;
color: #333;
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
background-color: #a6a6a6;
color: black;
}
}
#-webkit-keyframes flip-down-back {
0% {
-webkit-transform: rotateY(180deg) rotateX(0deg);
transform: rotateY(180deg) rotateX(0deg);
background-color: #a6a6a6;
color: black;
}
100% {
-webkit-transform: rotateY(180deg) rotateX(180deg);
transform: rotateY(180deg) rotateX(180deg);
background-color: #fff;
color: #333;
}
}
#keyframes flip-down-back {
0% {
-webkit-transform: rotateY(180deg) rotateX(0deg);
transform: rotateY(180deg) rotateX(0deg);
background-color: #a6a6a6;
color: black;
}
100% {
-webkit-transform: rotateY(180deg) rotateX(180deg);
transform: rotateY(180deg) rotateX(180deg);
background-color: #fff;
color: #333;
}
}
#-webkit-keyframes fade-under {
0% {
background-color: #a6a6a6;
color: black;
}
100% {
background-color: #fff;
color: #333;
}
}
#keyframes fade-under {
0% {
background-color: #a6a6a6;
color: black;
}
100% {
background-color: #fff;
color: #333;
}
}
.clock {
position: absolute;
width: 70vw;
top: 50%;
left: 15vw;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-perspective: 100vw;
perspective: 100vw;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.clock .digit {
margin-right: 1vw;
}
.clock .digit:nth-child(2n+2) {
margin-right: 3.5vw;
}
.clock .digit:last-child {
margin-right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="clock">
<div class="digit tenhour">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit hour">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit tenmin">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit min">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit tensec">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit sec">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
</div>

Animation glitches on website

I made a small scale experiment where I was testing an animation that would happen when you repeatedly hit the yellow square, in the jsfiddle below:
http://jsfiddle.net/aritro33/v86tE/5/
However, I am trying to move the animation seen in that jsfiddle to the jsfiddle here when you hit the compose/post circle/button. The animation would be applied to the posts. This is the jsfiddle:
I am having problems however, and after the 3+ times hitting the compose and post button, the animation falls apart.
Any ideas how to put the same animation seen in the first jsfiddle in the second jsfiddle for the posts?
Thanks so much to anyone who can help!
HTML for second experiment:
<div id="compose"><span id="firstspan">Compose</span>
<span id="fourthspan">Post</span>
</div>
<span id="noposts">- No Posts Yet -</span>
<div id="composeheader">
<input type="text" id="secondspan" value="Write Header Here:" />
</div>
<div id="thecolor"></div>
<div class="bubble">
<input type="text" id="thehex" value="#2AC0A3" />
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>
</div>
<ul id="allposts"></ul>
CSS for second experiment:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
body {
background-color: #2D3E50;
}
#compose {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
left: 100px;
top: 40px;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
#compose:hover {
background-color: #219B86;
color: #EBF1F1;
}
#firstspan {
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 22px;
top: 75px;
}
#composeheader {
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 175px;
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: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 365px;
bottom: 275px;
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;
}
.thirdspan2{
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
#thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
position: relative;
left: 365px;
bottom: 315px;
}
.bubble {
position: relative;
left: 440px;
bottom: 365px;
width: 145px;
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 15px;
}
#thehex {
font-family:'Roboto';
font-size: 20px;
height: 30px;
width: 115px;
background-color: white;
position: relative;
border: 0px none;
outline: 0px solid transparent;
top: 10px;
left: 28px;
}
.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;
}
#noposts {
color: white;
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 440px;
bottom: 100px;
}
#fourthspan {
color: #2c3e50;
font-family:'Roboto';
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
}
ul#allposts li{
min-height: 140px;
width: 500px;
position: relative;
left: 239px;
bottom: 432px;
}
.thecolor2{
height: 50px;
width: 50px;
border-radius: 100px;
background-color: #2AC0A3;
position: relative;
bottom: 591px;
left: 325px;
}
ul{
list-style-type: none;
}
.composeheader2{
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 581px;
left: 325px;
color: white;
}
.secondspan2{
color: white;
font-family:'Roboto';
font-size: 40px;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
position: relative;
left: 17px;
top: 13px;
}
.body2{
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 325px;
bottom: 371px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
JS for second experiment:
var clicktwice = false;
var color;
var forrgb;
var finalrgb2;
var myheader;
//198 238 230
//rgb(42, 192, 163) #2AC0A3
//rgb(198, 238, 230) #C6EEE6
//+156, +46, +67
$('#fourthspan').hide();
$('#thecolor').hide();
$('.bubble').hide();
$('#composeheader').hide();
$('#body').hide();
$('#compose').click(function () {
setInterval(function () {
$('#noposts').fadeTo(10, 0);
}, 3000);
});
$("#thehex").keyup(function () {
color = $("#thehex").val();
forrgb = $("#thehex").val();
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
forrgb = $('#thehex').val().replace('#', '');
var reg = forrgb.length === 3 ? forrgb[0] + forrgb[0] + forrgb[1] + forrgb[1] + forrgb[2] + forrgb[2] : forrgb;
var conv = reg.match(/.{2}/g);
var r = parseInt(conv[0], 16);
r = r + 156;
var g = parseInt(conv[1], 16);
g = g + 46;
var b = parseInt(conv[2], 16);
b = b + 67;
var rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
var finalrgb = ('rgb(' + rgb + ')');
finalrgb2 = finalrgb;
$("#body").css("background-color", finalrgb);
});
$('#compose').click(function () {
if (clicktwice === false) {
color = "#2AC0A3";
finalrgb2 = "rgb(198, 238, 230)";
$("#secondspan").val("Write Header Here:");
$('#thirdspan').text("Write context text here:");
$('#thehex').val(color);
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
$("#body").css("background-color", finalrgb2);
$('#thecolor').fadeTo(0, 1);
$('#body').fadeTo(0,1);
$('.bubble').fadeTo(0,1);
$('#composeheader').fadeTo(0, 1);
$('#firstspan').hide();
$('#fourthspan').show();
$('#thecolor').show();
$('.bubble').show();
$('#composeheader').show();
$('#body').show();
$(".composeheader2").animate({
bottom: '-=248px'
}, 400);
$(".body2").animate({
bottom:'-=248px'
}, 400);
$(".thecolor2").animate({
bottom:'-=245px'
}, 400);
$('#thecolor').addClass('box animated bounceInDown');
$('.bubble').addClass('box animated bounceInDown');
$('#composeheader').addClass('box animated bounceInDown');
$('#body').addClass('box animated bounceInDown');
clicktwice = true;
} else if (clicktwice === true) {
myheader = $("#secondspan").val();
$('.bubble').fadeTo(300, 0);
$('#firstspan').show();
$('#fourthspan').hide();
clicktwice = false;
var thestream = document.getElementById('allposts');
var oneofpost = document.createElement('li');
var thecolor2 = document.createElement('div');
thecolor2.className = "thecolor2";
var composeheader2 = document.createElement('div');
composeheader2.className = "composeheader2";
var secondspan2 = document.createElement('span');
secondspan2.className = "secondspan2";
var body2 = document.createElement('div');
body2.className = "body2";
var thirdspan2 = document.createElement('span');
thirdspan2.className = "thirdspan2";
var bodytext = $('#thirdspan').html();
thirdspan2.innerHTML = bodytext;
body2.style.backgroundColor = finalrgb2;
secondspan2.innerHTML = myheader;
thecolor2.style.backgroundColor = color;
composeheader2.style.backgroundColor = color;
secondspan2.style.backgroundColor = color;
secondspan2.style.borderColor = color;
$('#thecolor').fadeTo(0, 0);
$('#body').fadeTo(0, 0);
$('#composeheader').fadeTo(0, 0);
thestream.appendChild(body2);
thestream.appendChild(thecolor2);
thestream.appendChild(composeheader2);
composeheader2.appendChild(secondspan2);
body2.appendChild(thirdspan2);
$('#thecolor').removeClass('box animated bounceInDown');
$('.bubble').removeClass('box animated bounceInDown');
$('#composeheader').removeClass('box animated bounceInDown');
$('#body').removeClass('box animated bounceInDown');
}
});

I've cleaned this up A LOT, the code should be much easier to read and follow now:
HTML
<script id="empty-message" type="html/template">
<div class="message new box animated bounceInDown">
<div class="thecolor"></div>
<div class="bubble">
<input type="text" class="hexcolor" value="#2AC0A3" />
</div>
<div class="composeheader">
<input type="text" value="Write Header Here:" />
</div>
<div class="body">
<span contenteditable="true">Write context text here:</span>
</div>
</div>
</script>
<div id="message-actions">
<span class="compose">Compose</span>
<span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>
JavaScript
var getRGB = function(color) {
var rgb = color.replace('#', '');
rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb;
var conv = rgb.match(/.{2}/g);
var r = parseInt(conv[0], 16) + 156;
var g = parseInt(conv[1], 16); + 46;
var b = parseInt(conv[2], 16); + 67;
rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
rgb = ('rgb(' + rgb + ')');
return rgb;
};
$(document).ready(function() {
$('#all-posts').on('keyup', '.message.new .hexcolor', function () {
var color = $(this).val();
$(".message.new .thecolor, .message.new .composeheader").css("background-color", color);
$(".message.new .body").css("background-color", getRGB(color));
});
$('#message-actions').click(function () {
if ($('.compose').is(':visible')) {
$('#all-posts').prepend($('#empty-message').html());
} else {
var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown');
$message.find('.composeheader > input').attr('readonly', true);
$message.find('.body > span').attr('contenteditable', false);
}
$('#no-posts').hide();
$('.compose, .post').toggle();
});
});
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
/* css for animation */
.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;
}
/* page */
body {
background-color: #2D3E50;
font-family:'Roboto';
min-width: 960px;
}
/* message compose */
.message {
margin-top: 40px;
}
.composeheader {
background-color:#2AC0A3;
color: white;
padding: 10px 15px;
clear: both;
}
.composeheader INPUT {
color: white;
font-size: 40px;
background-color: transparent;
border-width: 0;
font-family: 'Roboto';
}
.body {
min-height: 80px;
overflow: hidden;
padding: 20px;
background-color: #C6EEE6;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.body > span {
color: black;
outline: 0px solid transparent;
}
.thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
float: left;
margin-bottom: 10px;
}
.bubble { display: none; }
.message.new .bubble {
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
margin-left: 20px;
display: block;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: 55px;
top: 15px;
}
.hexcolor {
font-size: 20px;
height: 30px;
width: 100px;
background-color: transparent;
border-width: 0px;
margin: 10px 5px
}
/* compose button */
#message-actions {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
float: left;
margin: 40px 100px 10px;
}
#message-actions:hover {
background-color: #219B86;
color: #EBF1F1;
}
#no-posts {
color: white;
font-size: 39px;
float: left;
margin-top: 120px;
}
.compose {
font-size: 39px;
position: relative;
left: 22px;
top: 75px;
}
.post {
color: #2c3e50;
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
display: none;
}
/* messages */
#all-posts {
min-height: 140px;
width: 500px;
float: left;
}
jsFiddle Demo
Use meaningful names for your ids and css classes, it makes the code much easier to follow and understand what is going on. Styles such as "firstspan" mean nothing and means you have to keep looking back at the markup to figure out context.
I've cleaned this up as best I can, I'm not good with CSS3 or the animation stuff, I'll leave it to you to fix that up. I think this should be working exactly as you expect now, messages slide down and are added to the stack top down.
EDIT 2:
I changed a lot of the ID selectors to use and refactored the code to make it much simpler. You were also setting the ID on the newly created elements which were all the same, this is wrong and will cause you issues further down the line (ID's should be unique per page).
I cleaned up the JS, combining multiple statements which did the same thing with different selectors. You were using a lot of standard JavaScript getElementById type calls, I changed these create the DOM elements using jQuery instead.
I used an html/template script declaration to create the new elements, it's much cleaner than using jQuery to built up your new DOM elements. Also, your compose and post elements were essentially the same thing. Don't repeat CSS styles, either combine multiple selectors, or just re-use the same structure as I have done. Hopefully the changes make sense.

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

We Keep Coding

JavaScript is the programming language of the Web.

How to control 3D CSS cube with controls - javascript

Related

How to fix animation glitch in mozilla firefox and edge?

Why counter is not working after one interval

External javascript file does not load

Animation glitches on website

Keep div static when other appears

Categories

Resources