css animation doesn't work in firefox - html

My code doesnt work in Firefox and I dont know why. Any advices? It works fine in Chrome, IE and Opera. I tried almost all prefixes combinations but still it wont work. Is it possible that something is wrong with my PC or Firefox browser?
.span-accent {
color: rgb(60, 185, 120);
-webkit-animation: breath 2s infinite;
-moz-animation: breath 2s infinite;
animation: breath 2s infinite;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes breath {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
25% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-moz-transform: scale(1);
transform: scale(1);
}
75% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>


Ok guys, I found it.
Problem is in <span> element. For some reason Firefox doesnt animate inline elements.
So what I did is change a <span> atribute to display: inline-block.
It just wont work strictly for any inline element.

Related

How to make CSS animation not reverse after finishing? Example inside

I currently have a picture that is rotating and scaling using keyframes, but my problem is that after every iteration it reverses rotation direction. How do I stop this from happening so that the rotating is smooth in one direction? JSFiddle. See full webpage HTML here:
<html class="fourzerofour">
<head>
<!-- Hey, look at you, you know how to view the source code, well done! Here's a unicode cookie: 🍪-->
<meta charset="UTF-8">
<title>Egrodo | 404</title>
<link rel="stylesheet" type="text/css" href="../CSS/error404.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="../CSS/materialize.css" />
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='../favicon.ico' type='image/x-icon'/ >
</head>
<body class="fourzerofour">
<section class="fourzerofour">
<p class="fourzerofour">
404 - What have you done?!?
</p>
<img draggable="false" class="rotating fourzerofour" src="https://i.imgur.com/n5SVALx.png">
</section>
</body>
</html>
and my full page CSS here:
body {
font-family: 'Raleway', sans-serif;
}
p.fourzerofour {
font-size: 2.4em;
color: white;
display: block;
margin-top: -2em;
margin-bottom: 2em;
}
body.fourzerofour {
height: 100%;
background-color: darkgrey;
}
section.fourzerofour {
position: relative;
height: 100%;
text-align: center;
margin-top: 23%;
}
.rotating {
-webkit-animation: rotating 3s linear infinite;
-moz-animation: rotating 3s linear infinite;
-ms-animation: rotating 3s linear infinite;
-o-animation: rotating 3s linear infinite;
animation: rotating 3s linear infinite;
animation-direction: alternate;
width: 10em;
}
p.fourzerofour + .rotating:active {
-webkit-filter: invert(1);
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
50% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1):
}
100% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
}
#keyframes rotating {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
50% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) sscale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
100% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
}

Get rid of the infinite line and remove the 50% keyframe styles as well as this is the middle of the animation. Instead give the 100% the final animation styles you would like: JS Fiddle
Appending infinite on the animation will have it continually loop.
.rotating {
-webkit-animation: rotating 3s linear;
-moz-animation: rotating 3s linear;
-ms-animation: rotating 3s linear;
-o-animation: rotating 3s linear;
animation: rotating 3s linear;
animation-direction: alternate;
width: 10em;
}
p.fourzerofour + .rotating:active {
-webkit-filter: invert(1);
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
100% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1):
}
}
#keyframes rotating {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
100% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) sscale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
And if I misunderstood the desired effect and you want it to continually loop in one direction, see #maioman answer

if you remove animation-direction:alternate it should be fine;
fiddle
moreover I adjusted rotation in fiddle

It has animation: rotating 3s linear infinite, where infinite is the transition-duration and here rotating is the transition i.e. why it keeps repeating its animation, removing that will do the trick for you.
Here the JSFiddle.

Why isn't transform: scale(0) working on animated element?

Why isn't transform: scale(0); working on a animated element?
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#box {
width: 150px;
height: 150px;
background: red;
animation: spin .5s infinite linear;
transform: scale(0);
}
I guess its because the keyframe take over transform, but even with !important after transform: scale(0) its still not changing.
http://jsfiddle.net/yun0xu8t/1/

You need to move transform: scale(0); to #keyframes
To rotate and scale together
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg) scale(0); }
}

CSS3 Arrow animation is not working [duplicate]

This question already has an answer here:
How do I make Sass work?
(1 answer)
Closed 7 years ago.
I am trying to animate an arrow downwards to indicate scroll down in a parallex site.
I have got this code from Codepen.
See working demo here : CodePen arrow animation
I am exactly using the same code on my site but it does not animate.
The arrow shows up but it does not animate.
What I am doing wrong?
HTML:
<div class="encircle bounce animated">
<div class="arrow">
</div>
</div>
CSS:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
#mixin animation($animation) {
-webkit-animation: #{$animation};
-moz-animation: #{$animation};
-ms-animation: #{$animation};
animation: #{$animation};
}
#mixin transform($transform) {
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
transform: $transform;
}
#include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {
#include transform(translateY(0));
}
40% {
#include transform(translateY(-20px));
}
60% {
#include transform(translateY(-10px));
}
}
body {
background: black;
}
.encircle {
width:60px;
height:60px;
border-radius:60px;
border: solid 2px white;
position: fixed;
bottom: 0;
left: 50%;
}
.arrow {
margin:0 auto;
margin-top: 13px;
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
#include animation(bounce 2s infinite);
}

You have SASS source code and it'll not work for you if you just include it like a css file. you need a SASS pre-compiler or use directly the generated css
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
body {
background: black;
}
.encircle {
width: 60px;
height: 60px;
border-radius: 60px;
border: solid 2px white;
position: fixed;
bottom: 0;
left: 50%;
}
.arrow {
margin: 0 auto;
margin-top: 13px;
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
to read more about SASS

Have 2 #-webkit-keyframes in 1 css

Is it possible to have 2 #-webkit-keyframes on 1 css? Like
#-webkit-keyframes pulse_one{
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); background-color: #b81900; }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
#-webkit-keyframes pulse_two{
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); background-color: #eea236; }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
#pulseOne
{
-webkit-animation-name: 'pulse_one';
-webkit-animation-duration: 5000ms;
-webkit-transform-origin:70% 70%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#pulseTwo
{
-webkit-animation-name: 'pulse_two';
-webkit-animation-duration: 5000ms;
-webkit-transform-origin:70% 70%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
I got the error saying "Unexpected token WEBKIT_KEYFRAMES_SYM found". But my 2 animation above works perfectly fine on my page. Im just curious and its kinda bug me a little when have a red line on my code. Any help is apreciated. Thanks :)

CSS Transitions not working, at all

I have the following two codes
.button:hover {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
And
#-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.animated.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
The first code works perfectly on every browser. It gives the required transition.
But when I used the second code, It worked perfectly on Chrome. But does not work on any other browser.
I read other questions here, came across here .
As it suggested, I should not use -moz -o -webkit. But that did not work for me.
There was a fiddle on that page too, http://jsfiddle.net/EghZs/ . It only works on my chrome. and not on any other browser.
Is this an issue with my browsers? Or is this a problem with the code?

It looks like you aren't specifying for enough browsers at the # level, and also in your #-moz block, the transform should just be "transform" instead of "-moz-transform" according to Mozilla's current documentation. (Since older versions of Firefox still use -moz-transform, you may have to get tricky with an #support block to manage older and newer Firefox versions at the same time.)
So essentially, you should be good to go after correcting the -moz-transform, and adding the correct support and prefixes for the other browsers.
I would try (condensed your spacing for brevity):
#-webkit-keyframes flipInX {
/* same block as you already have */
}
#-moz-keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% { transform: perspective(400px) rotateX(-10deg); }
70% { transform: perspective(400px) rotateX(10deg); }
100% { transform: perspective(400px) rotateX(0deg); }
}
#-o-keyframes flipInX { /* Opera */
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% { -o-transform: perspective(400px) rotateX(-10deg); }
70% { -o-transform: perspective(400px) rotateX(10deg); }
100% { -o-transform: perspective(400px) rotateX(0deg); }
}
#keyframes flipInX {
/* this will cover other browsers that
support keyframes and transforms */
0% {
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
}
Edit: IE will require -ms-transform, so I added that in.