<!DOCTYPE html>
<html>
<head>
<title>Kalin's CSS Playground</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Just Kalin's place to play around with CSS animations" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="CSSTimeline_vanilla.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="wrapper">
<div id="text0"></div>
<div id="text1"></div>
</div>
</body>
</html>
"use strict";
window.onload = function(){
//build an array of objects, each representing a string or shape to be animated in and out
var aAnimParams = [
{str:"CSS Playground!",
inClass:"tada text_holder title", div:"text0", inDelay:8000, outDelay:11000, outClass:"bounceOutUp text_holder title"},
{str:"with really big, obnoxious text",
inClass:"fadeInRight text_holder", div:"text1", inDelay:3000, outDelay:3000, outClass:"bounceOutDown text_holder"},
{str:"I'm just screwing around with animations, like this slow blink",
inClass:"slowBlink text_holder", div:"text1", inDelay:5000, outDelay:3000, outClass:"bounceOutDown text_holder"},
{str:"Tada! Look at this square!",
inClass:"fadeIn text_holder title", div:"text0", inDelay:5000, outDelay:3000, outClass:"fadeOut text_holder title"},
{str:"",
inClass:"tada square", div:"text1", inDelay:0},//show a plain square
{str:"Now it briefly becomes a circle!",
inClass:"fadeIn text_holder title", div:"text0", inDelay:5000, outDelay:3000, outClass:"fadeOut text_holder title"},
{str:"",
inClass:"square squareToCircle", div:"text1", inDelay:0, outDelay:4500, outClass:"bounceOutDown square"}, //now animate that square to a circle and back, then bounce it out
{str:"",
inClass:"slideLeft circle", div:"text1", inDelay:6000},
{str:"",
inClass:"squishedCircle", div:"text1", inDelay:1000, outDelay:100, outClass:"slideRight circle"}
];
var timeline = new CSSTimeline(aAnimParams, -1);
//note that the inDelay does not apply to the very first item. Its animation is shown immediately. Otherwise, here we'd call showNext on a timeout
timeline.play();
};
@-webkit-keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@-moz-keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@-ms-keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@-o-keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(0.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.3);
}
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-webkit-keyframes flash {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0);
}
20% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
}
50% {
-webkit-transform: translateY(0);
}
60% {
-webkit-transform: translateY(-15px);
}
80% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes shake {
0% {
-webkit-transform: translateX(0);
}
10% {
-webkit-transform: translateX(-10px);
}
20% {
-webkit-transform: translateX(10px);
}
30% {
-webkit-transform: translateX(-10px);
}
40% {
-webkit-transform: translateX(10px);
}
50% {
-webkit-transform: translateX(-10px);
}
60% {
-webkit-transform: translateX(10px);
}
70% {
-webkit-transform: translateX(-10px);
}
80% {
-webkit-transform: translateX(10px);
}
90% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(200deg);
opacity: 0;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-moz-keyframes fadeInUpBig {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-moz-keyframes fadeOutUpBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-moz-keyframes fadeInDownBig {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-moz-keyframes fadeOutDownBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-moz-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-moz-keyframes fadeInLeftBig {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-moz-keyframes fadeOutRightBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(0.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(0.9);
}
100% {
-moz-transform: scale(1);
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(30px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-moz-keyframes bounceOut {
0% {
-moz-transform: scale(1);
}
25% {
-moz-transform: scale(0.95);
}
50% {
opacity: 1;
-moz-transform: scale(1.1);
}
100% {
opacity: 0;
-moz-transform: scale(0.3);
}
}
@-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-moz-keyframes bounceOutDown {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(-20px);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-moz-keyframes bounceOutLeft {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-moz-keyframes bounceOutRight {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-moz-keyframes flash {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes bounce {
0% {
-moz-transform: translateY(0);
}
20% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
}
50% {
-moz-transform: translateY(0);
}
60% {
-moz-transform: translateY(-15px);
}
80% {
-moz-transform: translateY(0);
}
100% {
-moz-transform: translateY(0);
}
}
@-moz-keyframes shake {
0% {
-moz-transform: translateX(0);
}
10% {
-moz-transform: translateX(-10px);
}
20% {
-moz-transform: translateX(10px);
}
30% {
-moz-transform: translateX(-10px);
}
40% {
-moz-transform: translateX(10px);
}
50% {
-moz-transform: translateX(-10px);
}
60% {
-moz-transform: translateX(10px);
}
70% {
-moz-transform: translateX(-10px);
}
80% {
-moz-transform: translateX(10px);
}
90% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-moz-keyframes rotateInDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateOutDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateOut {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(200deg);
opacity: 0;
}
}
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-ms-keyframes fadeInUp {
0% {
opacity: 0;
-ms-transform: translateY(20px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-ms-keyframes fadeOutUp {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(-20px);
}
}
@-ms-keyframes fadeInDown {
0% {
opacity: 0;
-ms-transform: translateY(-20px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-ms-keyframes fadeOutDown {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(20px);
}
}
@-ms-keyframes fadeInRight {
0% {
opacity: 0;
-ms-transform: translateX(20px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-ms-keyframes fadeOutLeft {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(-20px);
}
}
@-ms-keyframes fadeInLeft {
0% {
opacity: 0;
-ms-transform: translateX(-20px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-ms-keyframes fadeOutRight {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(20px);
}
}
@-ms-keyframes fadeInUpBig {
0% {
opacity: 0;
-ms-transform: translateY(2000px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-ms-keyframes fadeOutUpBig {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(-2000px);
}
}
@-ms-keyframes fadeInDownBig {
0% {
opacity: 0;
-ms-transform: translateY(-2000px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-ms-keyframes fadeOutDownBig {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(2000px);
}
}
@-ms-keyframes fadeInRightBig {
0% {
opacity: 0;
-ms-transform: translateX(2000px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-ms-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(-2000px);
}
}
@-ms-keyframes fadeInLeftBig {
0% {
opacity: 0;
-ms-transform: translateX(-2000px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-ms-keyframes fadeOutRightBig {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(2000px);
}
}
@-ms-keyframes bounceIn {
0% {
opacity: 0;
-ms-transform: scale(0.3);
}
50% {
opacity: 1;
-ms-transform: scale(1.05);
}
70% {
-ms-transform: scale(0.9);
}
100% {
-ms-transform: scale(1);
}
}
@-ms-keyframes bounceInDown {
0% {
opacity: 0;
-ms-transform: translateY(-2000px);
}
60% {
opacity: 1;
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px);
}
100% {
-ms-transform: translateY(0);
}
}
@-ms-keyframes bounceInUp {
0% {
opacity: 0;
-ms-transform: translateY(2000px);
}
60% {
opacity: 1;
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px);
}
100% {
-ms-transform: translateY(0);
}
}
@-ms-keyframes bounceInRight {
0% {
opacity: 0;
-ms-transform: translateX(2000px);
}
60% {
opacity: 1;
-ms-transform: translateX(-30px);
}
80% {
-ms-transform: translateX(10px);
}
100% {
-ms-transform: translateX(0);
}
}
@-ms-keyframes bounceInLeft {
0% {
opacity: 0;
-ms-transform: translateX(-2000px);
}
60% {
opacity: 1;
-ms-transform: translateX(30px);
}
80% {
-ms-transform: translateX(-10px);
}
100% {
-ms-transform: translateX(0);
}
}
@-ms-keyframes bounceOut {
0% {
-ms-transform: scale(1);
}
25% {
-ms-transform: scale(0.95);
}
50% {
opacity: 1;
-ms-transform: scale(1.1);
}
100% {
opacity: 0;
-ms-transform: scale(0.3);
}
}
@-ms-keyframes bounceOutUp {
0% {
-ms-transform: translateY(0);
}
20% {
opacity: 1;
-ms-transform: translateY(20px);
}
100% {
opacity: 0;
-ms-transform: translateY(-2000px);
}
}
@-ms-keyframes bounceOutDown {
0% {
-ms-transform: translateY(0);
}
20% {
opacity: 1;
-ms-transform: translateY(-20px);
}
100% {
opacity: 0;
-ms-transform: translateY(2000px);
}
}
@-ms-keyframes bounceOutLeft {
0% {
-ms-transform: translateX(0);
}
20% {
opacity: 1;
-ms-transform: translateX(20px);
}
100% {
opacity: 0;
-ms-transform: translateX(-2000px);
}
}
@-ms-keyframes bounceOutRight {
0% {
-ms-transform: translateX(0);
}
20% {
opacity: 1;
-ms-transform: translateX(-20px);
}
100% {
opacity: 0;
-ms-transform: translateX(2000px);
}
}
@-ms-keyframes flash {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes bounce {
0% {
-ms-transform: translateY(0);
}
20% {
-ms-transform: translateY(0);
}
40% {
-ms-transform: translateY(-30px);
}
50% {
-ms-transform: translateY(0);
}
60% {
-ms-transform: translateY(-15px);
}
80% {
-ms-transform: translateY(0);
}
100% {
-ms-transform: translateY(0);
}
}
@-ms-keyframes shake {
0% {
-ms-transform: translateX(0);
}
10% {
-ms-transform: translateX(-10px);
}
20% {
-ms-transform: translateX(10px);
}
30% {
-ms-transform: translateX(-10px);
}
40% {
-ms-transform: translateX(10px);
}
50% {
-ms-transform: translateX(-10px);
}
60% {
-ms-transform: translateX(10px);
}
70% {
-ms-transform: translateX(-10px);
}
80% {
-ms-transform: translateX(10px);
}
90% {
-ms-transform: translateX(-10px);
}
100% {
-ms-transform: translateX(0);
}
}
@-ms-keyframes rotateInDownLeft {
0% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(-90deg);
opacity: 0;
}
100% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateInUpLeft {
0% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(90deg);
opacity: 0;
}
100% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateInUpRight {
0% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(-90deg);
opacity: 0;
}
100% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateInDownRight {
0% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(90deg);
opacity: 0;
}
100% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateOutDownLeft {
0% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(90deg);
opacity: 0;
}
}
@-ms-keyframes rotateOutUpLeft {
0% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(-90deg);
opacity: 0;
}
}
@-ms-keyframes rotateOutDownRight {
0% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(-90deg);
opacity: 0;
}
}
@-ms-keyframes rotateOutUpRight {
0% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(90deg);
opacity: 0;
}
}
@-ms-keyframes rotateIn {
0% {
-ms-transform-origin: center center;
-ms-transform: rotate(-200deg);
opacity: 0;
}
100% {
-ms-transform-origin: center center;
-ms-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateOut {
0% {
-ms-transform-origin: center center;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: center center;
-ms-transform: rotate(200deg);
opacity: 0;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
@keyframes bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0.3);
}
}
@keyframes bounceOutUp {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
@keyframes bounceOutDown {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
@keyframes bounceOutLeft {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
@keyframes bounceOutRight {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
@keyframes flash {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes bounce {
0% {
transform: translateY(0);
}
20% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
50% {
transform: translateY(0);
}
60% {
transform: translateY(-15px);
}
80% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@keyframes shake {
0% {
transform: translateX(0);
}
10% {
transform: translateX(-10px);
}
20% {
transform: translateX(10px);
}
30% {
transform: translateX(-10px);
}
40% {
transform: translateX(10px);
}
50% {
transform: translateX(-10px);
}
60% {
transform: translateX(10px);
}
70% {
transform: translateX(-10px);
}
80% {
transform: translateX(10px);
}
90% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateOutDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateIn {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0;
}
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateOut {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
}
10% {
-webkit-transform: scale(0.9) rotate(-3deg);
}
20% {
-webkit-transform: scale(0.9) rotate(-3deg);
}
30% {
-webkit-transform: scale(1.1) rotate(3deg);
}
40% {
-webkit-transform: scale(1.1) rotate(-3deg);
}
50% {
-webkit-transform: scale(1.1) rotate(3deg);
}
60% {
-webkit-transform: scale(1.1) rotate(-3deg);
}
70% {
-webkit-transform: scale(1.1) rotate(3deg);
}
80% {
-webkit-transform: scale(1.1) rotate(-3deg);
}
90% {
-webkit-transform: scale(1.1) rotate(3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
}
}
@-moz-keyframes tada {
0% {
-moz-transform: scale(1);
}
10% {
-moz-transform: scale(0.9) rotate(-3deg);
}
20% {
-moz-transform: scale(0.9) rotate(-3deg);
}
30% {
-moz-transform: scale(1.1) rotate(3deg);
}
40% {
-moz-transform: scale(1.1) rotate(-3deg);
}
50% {
-moz-transform: scale(1.1) rotate(3deg);
}
60% {
-moz-transform: scale(1.1) rotate(-3deg);
}
70% {
-moz-transform: scale(1.1) rotate(3deg);
}
80% {
-moz-transform: scale(1.1) rotate(-3deg);
}
90% {
-moz-transform: scale(1.1) rotate(3deg);
}
100% {
-moz-transform: scale(1) rotate(0);
}
}
@-ms-keyframes tada {
0% {
-ms-transform: scale(1);
}
10% {
-ms-transform: scale(0.9) rotate(-3deg);
}
20% {
-ms-transform: scale(0.9) rotate(-3deg);
}
30% {
-ms-transform: scale(1.1) rotate(3deg);
}
40% {
-ms-transform: scale(1.1) rotate(-3deg);
}
50% {
-ms-transform: scale(1.1) rotate(3deg);
}
60% {
-ms-transform: scale(1.1) rotate(-3deg);
}
70% {
-ms-transform: scale(1.1) rotate(3deg);
}
80% {
-ms-transform: scale(1.1) rotate(-3deg);
}
90% {
-ms-transform: scale(1.1) rotate(3deg);
}
100% {
-ms-transform: scale(1) rotate(0);
}
}
@-o-keyframes tada {
0% {
-o-transform: scale(1);
}
10% {
-o-transform: scale(0.9) rotate(-3deg);
}
20% {
-o-transform: scale(0.9) rotate(-3deg);
}
30% {
-o-transform: scale(1.1) rotate(3deg);
}
40% {
-o-transform: scale(1.1) rotate(-3deg);
}
50% {
-o-transform: scale(1.1) rotate(3deg);
}
60% {
-o-transform: scale(1.1) rotate(-3deg);
}
70% {
-o-transform: scale(1.1) rotate(3deg);
}
80% {
-o-transform: scale(1.1) rotate(-3deg);
}
90% {
-o-transform: scale(1.1) rotate(3deg);
}
100% {
-o-transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
transform: scale(1);
}
10% {
transform: scale(0.9) rotate(-3deg);
}
20% {
transform: scale(0.9) rotate(-3deg);
}
30% {
transform: scale(1.1) rotate(3deg);
}
40% {
transform: scale(1.1) rotate(-3deg);
}
50% {
transform: scale(1.1) rotate(3deg);
}
60% {
transform: scale(1.1) rotate(-3deg);
}
70% {
transform: scale(1.1) rotate(3deg);
}
80% {
transform: scale(1.1) rotate(-3deg);
}
90% {
transform: scale(1.1) rotate(3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
@-webkit-keyframes slideLeft {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes slideLeft {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes slideLeft {
0% {
opacity: 0;
-ms-transform: translateX(2000px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-o-keyframes slideLeft {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes slideLeft {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes slideRight {
0% {
width: 26px;
-webkit-transform: translateX(0);
}
20% {
width: 100px;
}
30% {
width: 150px;
height: 75px;
}
100% {
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes slideRight {
0% {
width: 26px;
-moz-transform: translateX(0);
}
20% {
width: 100px;
}
30% {
width: 150px;
height: 75px;
}
100% {
-moz-transform: translateX(2000px);
}
}
@-ms-keyframes slideRight {
0% {
width: 26px;
-ms-transform: translateX(0);
}
20% {
width: 100px;
}
30% {
width: 150px;
height: 75px;
}
100% {
-ms-transform: translateX(2000px);
}
}
@-o-keyframes slideRight {
0% {
width: 26px;
-o-transform: translateX(0);
}
20% {
width: 100px;
}
30% {
width: 150px;
height: 75px;
}
100% {
-o-transform: translateX(2000px);
}
}
@keyframes slideRight {
0% {
width: 26px;
transform: translateX(0);
}
20% {
width: 100px;
}
30% {
width: 150px;
height: 75px;
}
100% {
transform: translateX(2000px);
}
}
body {
background: azure;
font-size: 15px;
padding: 0px;
margin: 0px;
}
#wrapper {
background-color: #ccc;
width: 100%;
height: 300px;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.text_holder {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 300px;
text-align: center;
}
.title {
font-size: 40px;
color: red;
}
.tada {
-webkit-animation: tada 2s both;
}
.fadeInRight {
-webkit-animation: fadeInRight 2s both;
}
.bounceOutDown {
-webkit-animation: bounceOutDown 2s both;
}
.bounceOutUp {
-webkit-animation: bounceOutUp 2s both;
}
.slowBlink {
-webkit-animation: fadeIn 0.6s infinite alternate both;
}
.fadeIn {
-webkit-animation: fadeIn 2s ease-in both;
}
.fadeOut {
-webkit-animation: fadeOut 2s both;
}
.squareToCircle {
-webkit-animation: square-to-circle 2s 0.5s infinite cubic-bezier(1, 0.15, 0.29, 1.21) alternate both;
}
.slideLeft {
-webkit-animation: slideLeft 1s linear both;
}
.slideRight {
-webkit-animation: slideRight 1s linear both;
}
.tada {
-moz-animation: tada 2s both;
}
.fadeInRight {
-moz-animation: fadeInRight 2s both;
}
.bounceOutDown {
-moz-animation: bounceOutDown 2s both;
}
.bounceOutUp {
-moz-animation: bounceOutUp 2s both;
}
.slowBlink {
-moz-animation: fadeIn 0.6s infinite alternate both;
}
.fadeIn {
-moz-animation: fadeIn 2s ease-in both;
}
.fadeOut {
-moz-animation: fadeOut 2s both;
}
.squareToCircle {
-moz-animation: square-to-circle 2s 0.5s infinite cubic-bezier(1, 0.15, 0.29, 1.21) alternate both;
}
.slideLeft {
-moz-animation: slideLeft 1s linear both;
}
.slideRight {
-moz-animation: slideRight 1s linear both;
}
.tada {
-ms-animation: tada 2s both;
}
.fadeInRight {
-ms-animation: fadeInRight 2s both;
}
.bounceOutDown {
-ms-animation: bounceOutDown 2s both;
}
.bounceOutUp {
-ms-animation: bounceOutUp 2s both;
}
.slowBlink {
-ms-animation: fadeIn 0.6s infinite alternate both;
}
.fadeIn {
-ms-animation: fadeIn 2s ease-in both;
}
.fadeOut {
-ms-animation: fadeOut 2s both;
}
.squareToCircle {
-ms-animation: square-to-circle 2s 0.5s infinite cubic-bezier(1, 0.15, 0.29, 1.21) alternate both;
}
.slideLeft {
-ms-animation: slideLeft 1s linear both;
}
.slideRight {
-ms-animation: slideRight 1s linear both;
}
.tada {
-o-animation: tada 2s both;
}
.fadeInRight {
-o-animation: fadeInRight 2s both;
}
.bounceOutDown {
-o-animation: bounceOutDown 2s both;
}
.bounceOutUp {
-o-animation: bounceOutUp 2s both;
}
.slowBlink {
-o-animation: fadeIn 0.6s infinite alternate both;
}
.fadeIn {
-o-animation: fadeIn 2s ease-in both;
}
.fadeOut {
-o-animation: fadeOut 2s both;
}
.squareToCircle {
-o-animation: square-to-circle 2s 0.5s infinite cubic-bezier(1, 0.15, 0.29, 1.21) alternate both;
}
.slideLeft {
-o-animation: slideLeft 1s linear both;
}
.slideRight {
-o-animation: slideRight 1s linear both;
}
.tada {
animation: tada 2s both;
}
.fadeInRight {
animation: fadeInRight 2s both;
}
.bounceOutDown {
animation: bounceOutDown 2s both;
}
.bounceOutUp {
animation: bounceOutUp 2s both;
}
.slowBlink {
animation: fadeIn 0.6s infinite alternate both;
}
.fadeIn {
animation: fadeIn 2s ease-in both;
}
.fadeOut {
animation: fadeOut 2s both;
}
.squareToCircle {
animation: square-to-circle 2s 0.5s infinite cubic-bezier(1, 0.15, 0.29, 1.21) alternate both;
}
.slideLeft {
animation: slideLeft 1s linear both;
}
.slideRight {
animation: slideRight 1s linear both;
}
.square {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
background-color: coral;
}
.circle {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: coral;
border-radius: 50%;
}
.squishedCircle {
margin-top: 50px;
width: 26px;
height: 100px;
background-color: coral;
border-radius: 50%;
}
/*# sourceMappingURL=styles.css.map */
/**
* CSSTimeline class
* @class
* @classdesc Use CSSTimeline to cycle through a series of CSS classes on elements. usually used for animations.
* @param {array} aAnimParams an array of objects, each containing properties representing our animations
* each object can have these properties:
* str: a string that will be used as the content of the element
* inClass: space-separated list of classes to apply to the element
* div: the name of the element to use
* inDelay: delay in milliseconds before the inClass should be applied after the previous item's classes are applied
* outDelay (optional): delay in milliseconds before the outClass is applied after the item's classes are applied
* outClass (optional): space-delimited list of classes to apply to the element on its way out
* @param {number} nRepeatCount the number of times to play the timeline through
*/
function CSSTimeline(aAnimParams, nRepeatCount){
"use strict";
this.aAnimParams = aAnimParams;
this.nRepeatCount = nRepeatCount;
this.nCurIndex = 0;
this.nIteration = 0;
this.bPaused = false;
this.showNext = function(){
var oCurItem = this.aAnimParams[this.nCurIndex],
oCurDiv = document.getElementById(oCurItem.div), //$("#" + oCurItem.div),
self = this;
if(this.bPaused){
return;
}
//TODO: change the setting of the text so that we use shortcodes in the HTML that refer to properties of our oCurItem
//that way we can add any string to any part of any HTML element instead of being stuck with just one string per element
//insert string into div and remove all classes
oCurDiv.innerHTML = oCurItem.str;
oCurDiv.className = oCurItem.inClass;
if(oCurItem.outDelay){
setTimeout(function(){self.showOutClass.call(self, oCurItem.div, oCurItem.outClass)}, oCurItem.outDelay);
}
this.nCurIndex++;
if(this.nCurIndex === this.aAnimParams.length){//if we're at the end of the timeline
//and if repeatCount isn't -1 (infinite) AND we've fulfilled every iteration to match our repeat count, then we are done. Get out before calling showNext()
if(this.nRepeatCount > -1 && (this.nRepeatCount - 1) === this.nIteration){
return;
}
this.nCurIndex = 0;
this.nIteration++;
}
//grab the inDelay from the next item to see how long to wait before showing it
setTimeout(function(){self.showNext.call(self)}, aAnimParams[this.nCurIndex].inDelay);
}
/**
* used internally to show the classes that animate an element out
* @param {element} div the element that we are animating out
* @param {string} outClass the class or space-separated list of classes to apply to the element
*/
this.showOutClass = function(div, outClass){
document.getElementById(div).className = outClass;
}
/**
* pauses the animation
*/
this.pause = function(){
this.bPaused = true;
}
/**
* restarts the animation
*/
this.play = function(){
this.bPaused = false;
this.showNext();
}
}