Develop Reference

animation speed not changing in safari/chrome iphone

I am using a keyframe animation to rotate the circle. It is working fine in android browsers, chrome and, Mozilla. But animation speed on click of a button is not changing in safari/chrome of iphone.
class App extends React.Component{
state = {
speedClass : "two"
};
render(){
return(
<div>
<div className={"spinMe " + this.state.speedClass}>I am spinning</div>
<button onClick={this.handleClick}>Change speed</button>
</div>
);
}
handleClick=()=>{
this.setState({ speedClass: this.state.speedClass === "two"?"one":"two" });
}
}
ReactDOM.render(
<App/>,
document.getElementById("root")
);
.spinMe{
width:100px;
height:100px;
border-radius:50%;
border:1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.spinMe.one {
-moz-animation: spin 1s infinite linear;
-webkit-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.spinMe.two {
-moz-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I can not found any solution, please help me to fix this. In iPhone, speed not effecting. What can be the issue?

To fix this I have added the same keyframe animation two times. And on click, I am toggling the animation and it just worked!

Preloader for part of content

i have css preloader in wordpress site, and
I need the preloader to hide only part of the content.
Now preloader hides the entire page.
Example:
- Site title
- Site menu
- Content (need to hide)
- Footer
In header.php:
https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
$(window).load(function() {
$(".cssload-loader").delay(1300).fadeOut();
$(".preloader").delay(1400).fadeOut("slow");
})
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 100501;
height: 100%;
width: 100%;
}
.cssload-loader {
position: absolute;
left: 50%;
top: 50%;
width: 34.284271247462px;
height: 34.284271247462px;
margin-left: -17.142135623731px;
margin-top: -17.142135623731px;
border-radius: 100%;
animation-name: cssload-loader;
-o-animation-name: cssload-loader;
-ms-animation-name: cssload-loader;
-webkit-animation-name: cssload-loader;
-moz-animation-name: cssload-loader;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-duration: 2.8s;
-o-animation-duration: 2.8s;
-ms-animation-duration: 2.8s;
-webkit-animation-duration: 2.8s;
-moz-animation-duration: 2.8s;
}
.cssload-loader .cssload-side {
display: block;
width: 4px;
height: 14px;
background-color: rgba(0,0,0,0.81);
margin: 1px;
position: absolute;
border-radius: 50%;
animation-duration: 1.045s;
-o-animation-duration: 1.045s;
-ms-animation-duration: 1.045s;
-webkit-animation-duration: 1.045s;
-moz-animation-duration: 1.045s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-timing-function: ease;
-o-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
}
.cssload-loader .cssload-side:nth-child(1),
.cssload-loader .cssload-side:nth-child(5) {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
animation-name: cssload-rotate0;
-o-animation-name: cssload-rotate0;
-ms-animation-name: cssload-rotate0;
-webkit-animation-name: cssload-rotate0;
-moz-animation-name: cssload-rotate0;
}
.cssload-loader .cssload-side:nth-child(3),
.cssload-loader .cssload-side:nth-child(7) {
transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
animation-name: cssload-rotate90;
-o-animation-name: cssload-rotate90;
-ms-animation-name: cssload-rotate90;
-webkit-animation-name: cssload-rotate90;
-moz-animation-name: cssload-rotate90;
}
.cssload-loader .cssload-side:nth-child(2),
.cssload-loader .cssload-side:nth-child(6) {
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
animation-name: cssload-rotate45;
-o-animation-name: cssload-rotate45;
-ms-animation-name: cssload-rotate45;
-webkit-animation-name: cssload-rotate45;
-moz-animation-name: cssload-rotate45;
}
.cssload-loader .cssload-side:nth-child(4),
.cssload-loader .cssload-side:nth-child(8) {
transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
animation-name: cssload-rotate135;
-o-animation-name: cssload-rotate135;
-ms-animation-name: cssload-rotate135;
-webkit-animation-name: cssload-rotate135;
-moz-animation-name: cssload-rotate135;
}
.cssload-loader .cssload-side:nth-child(1) {
top: 17.142135623731px;
left: 34.284271247462px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(2) {
top: 29.213203431093px;
left: 29.213203431093px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(3) {
top: 34.284271247462px;
left: 17.142135623731px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(4) {
top: 29.213203431093px;
left: 5.0710678163691px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(5) {
top: 17.142135623731px;
left: 0px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(6) {
top: 5.0710678163691px;
left: 5.0710678163691px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(7) {
top: 0px;
left: 17.142135623731px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(8) {
top: 5.0710678163691px;
left: 29.213203431093px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
#keyframes cssload-rotate0 {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-o-keyframes cssload-rotate0 {
0% {
-o-transform: rotate(0deg);
}
60% {
-o-transform: rotate(180deg);
}
100% {
-o-transform: rotate(180deg);
}
}
#-ms-keyframes cssload-rotate0 {
0% {
-ms-transform: rotate(0deg);
}
60% {
-ms-transform: rotate(180deg);
}
100% {
-ms-transform: rotate(180deg);
}
}
#-webkit-keyframes cssload-rotate0 {
0% {
-webkit-transform: rotate(0deg);
}
60% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#-moz-keyframes cssload-rotate0 {
0% {
-moz-transform: rotate(0deg);
}
60% {
-moz-transform: rotate(180deg);
}
100% {
-moz-transform: rotate(180deg);
}
}
#keyframes cssload-rotate90 {
0% {
transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-o-keyframes cssload-rotate90 {
0% {
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-ms-keyframes cssload-rotate90 {
0% {
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-webkit-keyframes cssload-rotate90 {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-moz-keyframes cssload-rotate90 {
0% {
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#keyframes cssload-rotate45 {
0% {
transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-o-keyframes cssload-rotate45 {
0% {
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-ms-keyframes cssload-rotate45 {
0% {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-webkit-keyframes cssload-rotate45 {
0% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-moz-keyframes cssload-rotate45 {
0% {
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-moz-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-moz-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#keyframes cssload-rotate135 {
0% {
transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-o-keyframes cssload-rotate135 {
0% {
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-ms-keyframes cssload-rotate135 {
0% {
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-webkit-keyframes cssload-rotate135 {
0% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-moz-keyframes cssload-rotate135 {
0% {
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#keyframes cssload-loader {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes cssload-loader {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes cssload-loader {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes cssload-loader {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="preloader">
<div class="cssload-loader">
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
</div>
</div>
Here is my site so you can see the page code
I think i need script to show Site title and menu, or i need change css styles to hide content?

Change the CSS like below.
.preloader {
position: fixed;
background-color: #fff;
z-index: 107;
height: 100%;
width: 100%;
}
And put preloader element inside content div like this.
<div class="col-md-8 col-md-offset-2">
<div class="preloader" style="display: block;">
<div class="cssload-loader" style="display: none;">
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
</div>
</div>
<article>.... Article content .....</article>
</div>

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>

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.