Develop Reference

¿How to create text slider animation?

I have developed an slide automatic, very simple indeed.
I would like to add animation effects to the text, as this examples:
Demo 1
Demo 2
could help with some example or step that I must follow to adapt the effects of animation in the slide
Code complete:
$(function() {
var SliderModule = (function() {
var pb = {};
//Defaul #slider > div
pb.el = $('#slider > .carousel');
pb.items = {
panel: pb.el
}
var SliderInterval,
currentSlider = 0,
nextSlider = 1,
lengthSlider = pb.items.panel.length;
// Initialize
pb.init = function(settings) {
this.settings = settings || {duration: 8000}
var output = '';
SliderInit();
for(var i = 0; i < lengthSlider; i++) {
if (i == 0) {
output += '<div class="active"></div>';
} else {
output += '<div></div>';
}
}
}
var SliderInit = function() {
$("#barra").animate({
width:"100%"
},
pb.settings.duration,
"linear",
pb.startSlider
);
}
pb.startSlider = function() {
$("#barra").css("width", 0);
var panels = pb.items.panel,
controls = $('#slider-controls div');
if (nextSlider >= lengthSlider) {
nextSlider = 0;
currentSlider = lengthSlider-1;
}
controls.removeClass('active').eq(nextSlider).addClass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(nextSlider).fadeIn('slow');
currentSlider = nextSlider;
nextSlider += 1;
SliderInit();
}
var changePanel = function(id) {
$("#barra").stop().css("width", 0);
var panels = pb.items.panel,
controls = $('#slider-controls div');
if (id >= lengthSlider) {
id = 0;
} else if (id < 0) {
id = lengthSlider-1;
}
controls.removeClass('active').eq(id).addClass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(id).fadeIn('slow');
currentSlider = id;
nextSlider = id+1;
SliderInit();
}
return pb;
}());
SliderModule.init({duration: 7000});
});
/*!
* #Design slider
*/
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.item {
width: 100%;
height: 548px !important;
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
}
.slider-container {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 100%;
background-color:#FFF;
}
.slider-wrapper {
z-index: 90;
width: 100%;
height: 500px;
position: relative;
}
.slider-wrapper > div {
display: none;
}
div.slide-current {
display: block;
}
.slider-wrapper div .item {
top: 0;
left: 0;
height: auto;
max-width: 100%;
position: absolute;
}
.slider-inner {
top: 0;
left: 0;
width: 100%;
color: #fff;
height: 100%;
position: absolute;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.carousel-content {
text-align: center;
}
#slider .slider-inner h2 {
margin-top: 180px;
font-size: 36px;
line-height: 1;
text-transform: uppercase;
color: #fff;
}
.btn {
cursor: pointer;
user-select: none;
text-align: center;
border-radius: 4px;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
background-image: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
#slider .slider-inner .btn {
font-size: 18px;
border-width: 0;
margin-top: 10px;
line-height: 1.33;
border-radius: 6px;
padding: 10px 16px;
background: #72C05B;
border-color: #72C05B;
}
#barra {
width: 0%;
z-index: 99;
height: 10px;
margin-top: 15px;
position: relative;
background: #00c5b9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
<div id="slider" class="slider-wrapper">
<div class="carousel slide-current">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg1.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation</h2>
</div>
</div>
</div>
<div class="carousel">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg2.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation 2</h2>
</div>
</div>
</div>
<div class="carousel">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg1.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation 3</h2>
</div>
</div>
</div>
</div>
<div id="barra"></div>
</div>

For your text animation use this css it will help you to build you text animation. This will work for text/image and html elements also.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================
Made by NK Chaudhary
Questions, comments, concerns, love letters:
nkchaudhary13#gmail.com
==============================================
*/
/*
==============================================
slideDown
==============================================
*/
.logo{
height: 52px;
margin-top: -15px;
}
.logo:hover{
opacity:0.8;
transiftion:1s;
}
.slideDown{
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes slideDown {
0% {
transform: translateY(-100%);
}
50%{
transform: translateY(8%);
}
65%{
transform: translateY(-4%);
}
80%{
transform: translateY(4%);
}
95%{
transform: translateY(-2%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
50%{
-webkit-transform: translateY(8%);
}
65%{
-webkit-transform: translateY(-4%);
}
80%{
-webkit-transform: translateY(4%);
}
95%{
-webkit-transform: translateY(-2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
slideUp
==============================================
*/
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
slideLeft
==============================================
*/
.slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideLeft {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*
==============================================
slideRight
==============================================
*/
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*
==============================================
slideExpandUp
==============================================
*/
.slideExpandUp{
animation-name: slideExpandUp;
-webkit-animation-name: slideExpandUp;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease -out;
visibility: visible !important;
}
#keyframes slideExpandUp {
0% {
transform: translateY(100%) scaleX(0.5);
}
30%{
transform: translateY(-8%) scaleX(0.5);
}
40%{
transform: translateY(2%) scaleX(0.5);
}
50%{
transform: translateY(0%) scaleX(1.1);
}
60%{
transform: translateY(0%) scaleX(0.9);
}
70% {
transform: translateY(0%) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleX(0.95);
}
90% {
transform: translateY(0%) scaleX(1.02);
}
100%{
transform: translateY(0%) scaleX(1);
}
}
#-webkit-keyframes slideExpandUp {
0% {
-webkit-transform: translateY(100%) scaleX(0.5);
}
30%{
-webkit-transform: translateY(-8%) scaleX(0.5);
}
40%{
-webkit-transform: translateY(2%) scaleX(0.5);
}
50%{
-webkit-transform: translateY(0%) scaleX(1.1);
}
60%{
-webkit-transform: translateY(0%) scaleX(0.9);
}
70% {
-webkit-transform: translateY(0%) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleX(0.95);
}
90% {
-webkit-transform: translateY(0%) scaleX(1.02);
}
100%{
-webkit-transform: translateY(0%) scaleX(1);
}
}
/*
==============================================
expandUp
==============================================
*/
.expandUp{
animation-name: expandUp;
-webkit-animation-name: expandUp;
animation-duration: 0.7s;
-webkit-animation-duration: 0.7s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes expandUp {
0% {
transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
transform: translateY(-7%) scaleY(1.12);
}
75%{
transform: translateY(3%);
}
100% {
transform: translateY(0%) scale(1) scaleY(1);
}
}
#-webkit-keyframes expandUp {
0% {
-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
-webkit-transform: translateY(-7%) scaleY(1.12);
}
75%{
-webkit-transform: translateY(3%);
}
100% {
-webkit-transform: translateY(0%) scale(1) scaleY(1);
}
}
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
/*
==============================================
expandOpen
==============================================
*/
.expandOpen{
animation-name: expandOpen;
-webkit-animation-name: expandOpen;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
}
#keyframes expandOpen {
0% {
transform: scale(1.8);
}
50% {
transform: scale(0.95);
}
80% {
transform: scale(1.05);
}
90% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes expandOpen {
0% {
-webkit-transform: scale(1.8);
}
50% {
-webkit-transform: scale(0.95);
}
80% {
-webkit-transform: scale(1.05);
}
90% {
-webkit-transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
}
}
/*
==============================================
bigEntrance
==============================================
*/
.bigEntrance{
animation-name: bigEntrance;
-webkit-animation-name: bigEntrance;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
}
#keyframes bigEntrance {
0% {
transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
#-webkit-keyframes bigEntrance {
0% {
-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
/*
==============================================
hatch
==============================================
*/
.hatch{
animation-name: hatch;
-webkit-animation-name: hatch;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;
}
#keyframes hatch {
0% {
transform: rotate(0deg) scaleY(0.6);
}
20% {
transform: rotate(-2deg) scaleY(1.05);
}
35% {
transform: rotate(2deg) scaleY(1);
}
50% {
transform: rotate(-2deg);
}
65% {
transform: rotate(1deg);
}
80% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}
#-webkit-keyframes hatch {
0% {
-webkit-transform: rotate(0deg) scaleY(0.6);
}
20% {
-webkit-transform: rotate(-2deg) scaleY(1.05);
}
35% {
-webkit-transform: rotate(2deg) scaleY(1);
}
50% {
-webkit-transform: rotate(-2deg);
}
65% {
-webkit-transform: rotate(1deg);
}
80% {
-webkit-transform: rotate(-1deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
/*
==============================================
bounce
==============================================
*/
.bounce{
animation-name: bounce;
-webkit-animation-name: bounce;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes bounce {
0% {
transform: translateY(0%) scaleY(0.6);
}
60%{
transform: translateY(-100%) scaleY(1.1);
}
70%{
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
#-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0%) scaleY(0.6);
}
60%{
-webkit-transform: translateY(-100%) scaleY(1.1);
}
70%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
}
}
/*
==============================================
pulse
==============================================
*/
.pulse{
animation-name: pulse;
-webkit-animation-name: pulse;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}
/*
==============================================
floating
==============================================
*/
.floating{
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
tossing
==============================================
*/
.tossing{
animation-name: tossing;
-webkit-animation-name: tossing;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes tossing {
0% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}
#-webkit-keyframes tossing {
0% {
-webkit-transform: rotate(-4deg);
}
50% {
-webkit-transform: rotate(4deg);
}
100% {
-webkit-transform: rotate(-4deg);
}
}
/*
==============================================
pullUp
==============================================
*/
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
/*
==============================================
pullDown
==============================================
*/
.pullDown{
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullDown {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullDown {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
/*
==============================================
stretchLeft
==============================================
*/
.stretchLeft{
animation-name: stretchLeft;
-webkit-animation-name: stretchLeft;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
}
#keyframes stretchLeft {
0% {
transform: scaleX(0.3);
}
40% {
transform: scaleX(1.02);
}
60% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchLeft {
0% {
-webkit-transform: scaleX(0.3);
}
40% {
-webkit-transform: scaleX(1.02);
}
60% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(1);
}
}
/*
==============================================
stretchRight
==============================================
*/
.stretchRight{
animation-name: stretchRight;
-webkit-animation-name: stretchRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
#keyframes stretchRight {
0% {
transform: scaleX(0.3);
}
40% {
transform: scaleX(1.02);
}
60% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchRight {
0% {
-webkit-transform: scaleX(0.3);
}
40% {
-webkit-transform: scaleX(1.02);
}
60% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(1);
}
}
</style>
</head>
<body>
<div class="timeline-image pulse">
<h2 class="section-heading">My Amazing Team</h2>
</div>
</body>
</html>

Make Coin Flip Animation Two Sided

I would like this animation taken from animate.css to show a coin with 2 different side and not the same one. I pasted the relevant parts of my code to this Fiddle:
jsFiddle Link
HTML Code:
<div id="coin-flip">
<button id="btnFlip">Flip the Coin</button></br></br></br>
<div id="coin-flip-cont">
<div id="coin"></div>
</div></br></br></br>
<h2 id="result"></h2>
</div>
Javascript, jQuery Code:
$(function() {
var coin = {
sideOne: "./img/image1.png",
sideTwo: "./img/image2.png"
}
$("#btnFlip").click(function() {
$("#coin").html(`<img class="animated flip"src="${coin[result]}" width="200" length="200"/>`);
});
});
CSS is from Animate.css, You can view it in the Fiddle.
Basically the result I want is the coin to flip showing both different sides and landing on the one that is set by the rest of my code.
EDIT: Just adding this as an example of what I would like to achieve http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2
I feel that this can be done in a much simpler way and with the css that I already have.

First of all, change this line of your HTML code :
<button id="btnFlip">Flip the Coin</button>
To :
<button id="btnFlip" onclick="coin_flip()">Flip the Coin</button>
And then change your javascript to this code :
function coin_flip{
var coin_1 = "/images/image_1.png"
var coin_2 = "/images/image_2.png"
// the 8 below is the number of flips in your animation
for (var i = 0 ; i<8 ; i++){
if (document.getElementById("coin").src == coin_1){
document.getElementById("coin").src == coin_2
}
if (document.getElementById("coin").src == coin_2){
document.getElementById("coin").src == coin_1
}
}
// below chooses a random side
var rand = Math.floor((Math.random() * 2) + 1);
document.getElementById("coin").src == "coin_" + rand
}
This javascript code flips the coin 8 times before choosing a random side to land on.

you can use animationend event to detect when the CSS animation ended.
Then you execute code to change the image source.
JQuery
$('#coin').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
$("#coin").removeClass('animateCoin');
setTimeout(function() {
var srcImg = $($('#coin img')[0]).attr('src');
if (srcImg === coin.heads)
$($('#coin img')[0]).attr('src',coin.tails);
else
$($('#coin img')[0]).attr('src',coin.heads);
$("#coin").addClass('animateCoin');
},50);
});
CSS :
.animateCoin {
animation: flip 1s;
}

Here is the complete code you can flip coin 2 sided solution run snippet.
To watch correct result see in full page view otherwise you can see on codepen.
You can have link of codepen too click here
jQuery(document).ready(function($){
var spinArray = ['animation900','animation1080','animation1260','animation1440','animation1620','animation1800','animation1980','animation2160'];
function getSpin() {
var spin = spinArray[Math.floor(Math.random()*spinArray.length)];
return spin;
}
$('#flip').on('click', function(){
$('#coin').removeClass();
setTimeout(function(){
$('#coin').addClass(getSpin());
}, 100);
});
});
html, body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
}
#coin-flip-cont {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
#coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
#coin .front, #coin .back {
position: absolute;
width: 200px;
height: 200px;
}
#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-color: #3498db;
border: solid 5px gray;
}
#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-color: #2ecc71;
border: solid 5px gray;
}
#coin.animation900 {
-webkit-animation: rotate900 3s linear forwards;
animation: rotate900 3s linear forwards;
}
#coin.animation1080 {
-webkit-animation: rotate1080 3s linear forwards;
animation: rotate1080 3s linear forwards;
}
#coin.animation1260 {
-webkit-animation: rotate1260 3s linear forwards;
animation: rotate1260 3s linear forwards;
}
#coin.animation1440 {
-webkit-animation: rotate1440 3s linear forwards;
animation: rotate1440 3s linear forwards;
}
#coin.animation1620 {
-webkit-animation: rotate1620 3s linear forwards;
animation: rotate1620 3s linear forwards;
}
#coin.animation1800 {
-webkit-animation: rotate1800 3s linear forwards;
animation: rotate1800 3s linear forwards;
}
#coin.animation1980 {
-webkit-animation: rotate1980 3s linear forwards;
animation: rotate1980 3s linear forwards;
}
#coin.animation2160 {
-webkit-animation: rotate2160 3s linear forwards;
animation: rotate2160 3s linear forwards;
}
#-webkit-keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#-webkit-keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#-webkit-keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#-webkit-keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#-webkit-keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#-webkit-keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#-webkit-keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#-webkit-keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
#keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 125px;
position: inherit;
}
.front-text{
font-weight: 700 !important;
margin-top: 45%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div>
<div id="coin-flip-cont">
<div id="coin">
<div class="front"><p class="front-text">Head</p></div>
<div class="back"><p class="front-text">Tail</p></div>
</div>
</div>
<button type="button" id="flip" class="button"> Flip Coin</button>
</div>
</center>

AJAX on load loading spinner

I'm wanting to place something like this on my website. Here is the codepen.
#-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
width: 30px;
border: 8px solid #ffffff;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
}
body {
background: #774CFF;
}
.loading-spinner {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
<body>
<div class="loading-spinner"></div>
</body>
However, I'm wanting this to display until all my ajax has loaded on my site, I have 5-6 API GET calls, and one by rails. How would i go about this? So that it covers the whole page until its loaded.

Convert the .loading-spinner to be a mask (see the code) so it will hide the content.
When ajax done just .hide() it.
$.ajax({
url: 'your_ajax',
success: function() {
hideLoader()
},
error: function() {
hideLoader()
}
});
function hideLoader() {
$('.loading-spinner').hide();
}
#-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
background: #774CFF;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.loading-spinner:before {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
width: 30px;
border: 8px solid #ffffff;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
}
/*body {
background: #774CFF;
}*/
.loading-spinner:before {
content:"";
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="loading-spinner"></div>
Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum
</body>

Scroll function not working when overflow hidden

I have a program that should do a certain thing when you scroll upwards however, it does not respond to my scroll. I have reason to believe it is because of the
overflow: hidden
attribute I have added to the body, however, I do not want the scroll bar to show. Any idea on how to make the animation show when user scrolls downwards, but at the same time, not move the page (not actually scroll down?)
JSFIDDLE:
http://jsfiddle.net/aritro33/KFxgL/
HTML:
<div style="width: 200px; height: 1000px"></div>
<div id="up">SCROLL UP</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
body {
overflow: hidden;
text-align: center;
background-color: #79CDCD;
}
p {
font-family:'Roboto';
font-size: 60px;
color: white;
z-index: -1;
}
#next {
background-color: #79cda3;
width: 1185px;
position: relative;
right: 10px;
height: 750px;
top: -200px;
z-index: -1;
}
.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:
$('#next').fadeTo(0,0);
$(function () {
var lastScroll = 0;
$(window).scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScroll) {
$('p').fadeTo(350, 0);
$('p').fadeTo(370, 1);
$('#next').fadeTo(0,1);
$('#next').addClass('box animated bounceInUp');
}
lastScroll = st;
});
});

For webkit browser you can try this:
Without overflow:hidden in body
::-webkit-scrollbar {
display: none;
}
DEMO

Firefox CSS animations not working?

Check out the Path-like menu http://jsfiddle.net/U7cjj/1/ and click on the orange button to see the menu fan out. This effect is accomplished by toggling class using jQuery and CSS animations.
The demo works in webkit-based browsers but not on Firefox. The class is properly toggled on click but no menu items show. Does Firefox not support this type of css animations? Is there a way to make it work by using polyfill or a Javascript/jQuery fallback?
CSS below:
/* Global Reset
------------------------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
.force3d, .animation-flyout, section.container div.button.expanded.cam, section.container div.button.expanded.friend, section.container div.button.expanded.location, section.container div.button.expanded.music, section.container div.button.expanded.comment, section.container div.button.expanded.status, .animation-flyin, section.container div.button.collapsed.cam, section.container div.button.collapsed.friend, section.container div.button.collapsed.location, section.container div.button.collapsed.music, section.container div.button.collapsed.comment, section.container div.button.collapsed.status {
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d; }
.animation-flyout, section.container div.button.expanded.cam, section.container div.button.expanded.friend, section.container div.button.expanded.location, section.container div.button.expanded.music, section.container div.button.expanded.comment, section.container div.button.expanded.status {
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3);
-moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3);
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.animation-flyin, section.container div.button.collapsed.cam, section.container div.button.collapsed.friend, section.container div.button.collapsed.location, section.container div.button.collapsed.music, section.container div.button.collapsed.comment, section.container div.button.collapsed.status {
-webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045);
-moz-animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045);
animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045);
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
#-webkit-keyframes flyout-cam {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg); }
100% {
-webkit-transform: translate3d(0px, -136px, 0) rotate(360deg);
-moz-transform: translate3d(0px, -136px, 0) rotate(360deg);
-ms-transform: translate3d(0px, -136px, 0) rotate(360deg);
-o-transform: translate3d(0px, -136px, 0) rotate(360deg);
transform: translate3d(0px, -136px, 0) rotate(360deg); } }
#-webkit-keyframes flyout-friend {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg); }
100% {
-webkit-transform: translate3d(42px, -129px, 0) rotate(360deg);
-moz-transform: translate3d(42px, -129px, 0) rotate(360deg);
-ms-transform: translate3d(42px, -129px, 0) rotate(360deg);
-o-transform: translate3d(42px, -129px, 0) rotate(360deg);
transform: translate3d(42px, -129px, 0) rotate(360deg); } }
#-webkit-keyframes flyout-location {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg); }
100% {
-webkit-transform: translate3d(80px, -110px, 0) rotate(360deg);
-moz-transform: translate3d(80px, -110px, 0) rotate(360deg);
-ms-transform: translate3d(80px, -110px, 0) rotate(360deg);
-o-transform: translate3d(80px, -110px, 0) rotate(360deg);
transform: translate3d(80px, -110px, 0) rotate(360deg); } }
#-webkit-keyframes flyout-music {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg); }
100% {
-webkit-transform: translate3d(110px, -80px, 0) rotate(360deg);
-moz-transform: translate3d(110px, -80px, 0) rotate(360deg);
-ms-transform: translate3d(110px, -80px, 0) rotate(360deg);
-o-transform: translate3d(110px, -80px, 0) rotate(360deg);
transform: translate3d(110px, -80px, 0) rotate(360deg); } }
#-webkit-keyframes flyout-comment {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg); }
100% {
-webkit-transform: translate3d(129px, -42px, 0) rotate(360deg);
-moz-transform: translate3d(129px, -42px, 0) rotate(360deg);
-ms-transform: translate3d(129px, -42px, 0) rotate(360deg);
-o-transform: translate3d(129px, -42px, 0) rotate(360deg);
transform: translate3d(129px, -42px, 0) rotate(360deg); } }
#-webkit-keyframes flyout-status {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg); }
100% {
-webkit-transform: translate3d(136px, 0px, 0) rotate(360deg);
-moz-transform: translate3d(136px, 0px, 0) rotate(360deg);
-ms-transform: translate3d(136px, 0px, 0) rotate(360deg);
-o-transform: translate3d(136px, 0px, 0) rotate(360deg);
transform: translate3d(136px, 0px, 0) rotate(360deg); } }
#-webkit-keyframes flyin-cam {
0% {
-webkit-transform: translate3d(0px, -136px, 0) rotate(0deg);
-moz-transform: translate3d(0px, -136px, 0) rotate(0deg);
-ms-transform: translate3d(0px, -136px, 0) rotate(0deg);
-o-transform: translate3d(0px, -136px, 0) rotate(0deg);
transform: translate3d(0px, -136px, 0) rotate(0deg); }
40% {
-webkit-transform: translate3d(0px, -136px, 0) rotate(360deg);
-moz-transform: translate3d(0px, -136px, 0) rotate(360deg);
-ms-transform: translate3d(0px, -136px, 0) rotate(360deg);
-o-transform: translate3d(0px, -136px, 0) rotate(360deg);
transform: translate3d(0px, -136px, 0) rotate(360deg); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
-moz-transform: translate3d(0, 0, 0) rotate(360deg);
-ms-transform: translate3d(0, 0, 0) rotate(360deg);
-o-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg); } }
#-webkit-keyframes flyin-friend {
0% {
-webkit-transform: translate3d(42px, -129px, 0) rotate(0deg);
-moz-transform: translate3d(42px, -129px, 0) rotate(0deg);
-ms-transform: translate3d(42px, -129px, 0) rotate(0deg);
-o-transform: translate3d(42px, -129px, 0) rotate(0deg);
transform: translate3d(42px, -129px, 0) rotate(0deg); }
40% {
-webkit-transform: translate3d(42px, -129px, 0) rotate(360deg);
-moz-transform: translate3d(42px, -129px, 0) rotate(360deg);
-ms-transform: translate3d(42px, -129px, 0) rotate(360deg);
-o-transform: translate3d(42px, -129px, 0) rotate(360deg);
transform: translate3d(42px, -129px, 0) rotate(360deg); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
-moz-transform: translate3d(0, 0, 0) rotate(360deg);
-ms-transform: translate3d(0, 0, 0) rotate(360deg);
-o-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg); } }
#-webkit-keyframes flyin-location {
0% {
-webkit-transform: translate3d(80px, -110px, 0) rotate(0deg);
-moz-transform: translate3d(80px, -110px, 0) rotate(0deg);
-ms-transform: translate3d(80px, -110px, 0) rotate(0deg);
-o-transform: translate3d(80px, -110px, 0) rotate(0deg);
transform: translate3d(80px, -110px, 0) rotate(0deg); }
40% {
-webkit-transform: translate3d(80px, -110px, 0) rotate(360deg);
-moz-transform: translate3d(80px, -110px, 0) rotate(360deg);
-ms-transform: translate3d(80px, -110px, 0) rotate(360deg);
-o-transform: translate3d(80px, -110px, 0) rotate(360deg);
transform: translate3d(80px, -110px, 0) rotate(360deg); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
-moz-transform: translate3d(0, 0, 0) rotate(360deg);
-ms-transform: translate3d(0, 0, 0) rotate(360deg);
-o-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg); } }
#-webkit-keyframes flyin-music {
0% {
-webkit-transform: translate3d(110px, -80px, 0) rotate(0deg);
-moz-transform: translate3d(110px, -80px, 0) rotate(0deg);
-ms-transform: translate3d(110px, -80px, 0) rotate(0deg);
-o-transform: translate3d(110px, -80px, 0) rotate(0deg);
transform: translate3d(110px, -80px, 0) rotate(0deg); }
40% {
-webkit-transform: translate3d(110px, -80px, 0) rotate(360deg);
-moz-transform: translate3d(110px, -80px, 0) rotate(360deg);
-ms-transform: translate3d(110px, -80px, 0) rotate(360deg);
-o-transform: translate3d(110px, -80px, 0) rotate(360deg);
transform: translate3d(110px, -80px, 0) rotate(360deg); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
-moz-transform: translate3d(0, 0, 0) rotate(360deg);
-ms-transform: translate3d(0, 0, 0) rotate(360deg);
-o-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg); } }
#-webkit-keyframes flyin-comment {
0% {
-webkit-transform: translate3d(129px, -42px, 0) rotate(0deg);
-moz-transform: translate3d(129px, -42px, 0) rotate(0deg);
-ms-transform: translate3d(129px, -42px, 0) rotate(0deg);
-o-transform: translate3d(129px, -42px, 0) rotate(0deg);
transform: translate3d(129px, -42px, 0) rotate(0deg); }
40% {
-webkit-transform: translate3d(129px, -42px, 0) rotate(360deg);
-moz-transform: translate3d(129px, -42px, 0) rotate(360deg);
-ms-transform: translate3d(129px, -42px, 0) rotate(360deg);
-o-transform: translate3d(129px, -42px, 0) rotate(360deg);
transform: translate3d(129px, -42px, 0) rotate(360deg); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
-moz-transform: translate3d(0, 0, 0) rotate(360deg);
-ms-transform: translate3d(0, 0, 0) rotate(360deg);
-o-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg); } }
#-webkit-keyframes flyin-status {
0% {
-webkit-transform: translate3d(136px, 0px, 0) rotate(0deg);
-moz-transform: translate3d(136px, 0px, 0) rotate(0deg);
-ms-transform: translate3d(136px, 0px, 0) rotate(0deg);
-o-transform: translate3d(136px, 0px, 0) rotate(0deg);
transform: translate3d(136px, 0px, 0) rotate(0deg); }
40% {
-webkit-transform: translate3d(136px, 0px, 0) rotate(360deg);
-moz-transform: translate3d(136px, 0px, 0) rotate(360deg);
-ms-transform: translate3d(136px, 0px, 0) rotate(360deg);
-o-transform: translate3d(136px, 0px, 0) rotate(360deg);
transform: translate3d(136px, 0px, 0) rotate(360deg); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
-moz-transform: translate3d(0, 0, 0) rotate(360deg);
-ms-transform: translate3d(0, 0, 0) rotate(360deg);
-o-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg); } }
.clearfix {
zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both; }
body, html {
background: white; }
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
div.inner-wrapper {
padding: 20px; }
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100; }
a, a:link, a:active, a:visited {
color: #fc511d;
text-decoration: none; }
a:hover {
color: #c93103; }
::selection {
background: #fc511d; }
::-moz-selection {
background: #fc511d; }
section.container {
width: 400px;
margin: 200px auto;
position: relative; }
section.container div.open-button {
background-color: #fc511d;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
-ms-border-radius: 120px;
-o-border-radius: 120px;
border-radius: 120px;
height: 40px;
width: 40px;
text-align: center;
position: relative; }
section.container div.button {
background-color: #454545;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
color: white;
float: left;
font-size: 11px;
height: 32px;
left: 4px;
line-height: 3em;
position: absolute;
text-align: center;
top: 4px;
width: 32px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
section.container div.button.expanded:hover {
zoom: 1.2; }
section.container div.button.expanded.cam {
-webkit-animation-name: flyout-cam;
-moz-animation-name: flyout-cam;
animation-name: flyout-cam;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s; }
section.container div.button.expanded.friend {
-webkit-animation-name: flyout-friend;
-moz-animation-name: flyout-friend;
animation-name: flyout-friend;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.05s;
-moz-animation-delay: 0.05s;
animation-delay: 0.05s; }
section.container div.button.expanded.location {
-webkit-animation-name: flyout-location;
-moz-animation-name: flyout-location;
animation-name: flyout-location;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s; }
section.container div.button.expanded.music {
-webkit-animation-name: flyout-music;
-moz-animation-name: flyout-music;
animation-name: flyout-music;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.15s;
-moz-animation-delay: 0.15s;
animation-delay: 0.15s; }
section.container div.button.expanded.comment {
-webkit-animation-name: flyout-comment;
-moz-animation-name: flyout-comment;
animation-name: flyout-comment;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s; }
section.container div.button.expanded.status {
-webkit-animation-name: flyout-status;
-moz-animation-name: flyout-status;
animation-name: flyout-status;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
animation-delay: 0.25s; }
section.container div.button.collapsed.cam {
-webkit-animation-name: flyin-cam;
-moz-animation-name: flyin-cam;
animation-name: flyin-cam;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
animation-delay: 0.25s; }
section.container div.button.collapsed.friend {
-webkit-animation-name: flyin-friend;
-moz-animation-name: flyin-friend;
animation-name: flyin-friend;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s; }
section.container div.button.collapsed.location {
-webkit-animation-name: flyin-location;
-moz-animation-name: flyin-location;
animation-name: flyin-location;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.15s;
-moz-animation-delay: 0.15s;
animation-delay: 0.15s; }
section.container div.button.collapsed.music {
-webkit-animation-name: flyin-music;
-moz-animation-name: flyin-music;
animation-name: flyin-music;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s; }
section.container div.button.collapsed.comment {
-webkit-animation-name: flyin-comment;
-moz-animation-name: flyin-comment;
animation-name: flyin-comment;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.05s;
-moz-animation-delay: 0.05s;
animation-delay: 0.05s; }
section.container div.button.collapsed.status {
-webkit-animation-name: flyin-status;
-moz-animation-name: flyin-status;
animation-name: flyin-status;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s; }
div.open-button p {font-size:12px; padding-top:8px;}

You have only specified key-frames for -webkit-. You should duplicate this without any prefix for Mozilla.
I did one for you:
http://jsfiddle.net/AbdiasSoftware/U7cjj/2/
#keyframes flyout-cam {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg); }
As you can see now it also works in Firefox.