CSS3 transform not working on Firefox, why? - html

Hi here's my code in JSFiddle
http://jsfiddle.net/qnbxaLwh/
Here's the simple HTML
<span class="arrow">xssss</span>
Here's my CSS
.arrow {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right:10px;
bottom: 5%;
left: 0;
right: 0;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
I've been trying for hours but I don't understand why it's not working on firefox. I tried rearranging and googling some stuffs but nothing works.


change position:relative; to position:absolute;
working fiddle -> http://jsfiddle.net/qnbxaLwh/1/
you can remove keyframe for firefox, firefox no longer uses for 2 years ago.


If you need to use position relative, try using some tools like this -> https://coveloping.com/tools/css-animation-generator
According to the code that they use (working crossbrowser) you're using wrong prefix for you animations (-moz-animation-name, for example...)


Please update css
.arrow {
position: absolute;
margin-left: auto;
margin-right: auto;
padding-right:10px;
bottom: 5%;
left: 0;
right: 0;
top: 0;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}

Related

Animation Bounce property not working in Safari browser

#keyframes bounce {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
60%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.services-amenities .img-container:hover{
-webkit-animation:bounce 0.5s;
animation: bounce 0.5s;
}
<div class="col-lg-4 col-md-6 col-sm-6 text-center box">
<div class="img-container"><span class="icon icon_breakfast"></span></div>
<div class="text-uppercase">Complimentary Continental Breakfast</div>
</div>
the following code i have written to get the animation bounce effect to the icons the code is working in the chrome and firefox but it is not working in the safari browser. i have also mentioned the webkit the property.

#-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
60%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#-moz-keyframes bounce{
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
60%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
<section class="services-amenities">
<div class="col-lg-4 col-md-6 col-sm-6 text-center box">
<div class="img-container"><span class="icon icon_breakfast"></span></div>
<div class="text-uppercase">Complimentary Continental Breakfast</div>
</div>
</section>
i have just added the -webkit property in front of the keyframes, and also added the -moz property for the firefox browser. These code works fine in chrome, safari and firefox.

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

CSS Rotate Image XY

I have done with some examples a rotate image:
.image {
width: 60px;
height: 60px;
background-color: #0080FF;
margin: 100px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
But i would like to see the image allways face up instead of face down and with the stren ... if you see the example you will understand (dificult to explain it in english for me).

I think you are looking for scaleX(-1) and scaleY(-1) to flip your image.
Snippet :
.image {
width: 60px;
height: 60px;
background-color: #0080FF;
margin: 100px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px) scaleX(1) scaleY(1)
}
25% {
-webkit-transform: perspective(120px) rotateY(90deg) scaleX(1) scaleY(1)
}
25.1% {
-webkit-transform: perspective(120px) rotateY(90deg) scaleX(-1) scaleY(1)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg) scaleX(-1) scaleY(1)
}
75% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(90deg) scaleX(-1) scaleY(1)
}
75.1% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(90deg) scaleX(-1) scaleY(-1)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) scaleX(-1) scaleY(-1)
}
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1)
}
25% {
transform: perspective(120px) rotateX(-90deg) rotateY(0deg) scaleX(1) scaleY(1);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1)
}
25.1% {
transform: perspective(120px) rotateX(-90deg) rotateY(0deg) scaleX(1) scaleY(-1);
-webkit-transform: perspective(120px) rotateX(-90deg) rotateY(0deg) scaleX(1) scaleY(-1)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) scaleX(1) scaleY(-1);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) scaleX(1) scaleY(-1)
}
75% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(-90deg) scaleX(1) scaleY(-1);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(-90deg) scaleX(1) scaleY(-1)
}
75.1% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(-90deg) scaleX(-1) scaleY(-1);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(-90deg) scaleX(-1) scaleY(-1)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) scaleX(-1) scaleY(-1);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) scaleX(-1) scaleY(-1);
}
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Instead of rotating Y in the last transformation #keyframe 100% I applied a vertical flip, here's the snippet:
.image {
width: 60px;
height: 60px;
background-color: #0080FF;
margin: 100px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) scaleY(-1) rotateX(180deg)
}
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) scaleY(-1) ;
-webkit-transform: perspective(120px) rotateX(-180deg) scaleY(-1);
}
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

If I understand you correctly, you would like to avoid that in the end, the image "flips" immediately from being on its head to being right side up.
You could 'alternate' the animation: with that keyword, in the end it stops and animates backwards:
.image {
width: 60px;
height: 60px;
background-color: #0080FF;
margin: 100px auto;
-webkit-animation: rotateplane 1.2s ease-in-out 0s infinite alternate ;
animation: rotateplane 1.2s ease-in-out 0s infinite alternate;
}
#-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

I think you want something like
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
25% {
transform: perspective(120px) rotateX(-90deg) rotateY(0deg);
}
25.0001% {
transform: perspective(120px) rotateX(90deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
75% {
transform: perspective(120px) rotateX(0) rotateY(-90deg);
}
75.001% {
transform: perspective(120px) rotateX(0) rotateY(90deg);
}
100% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
.image {
width: 60px;
height: 60px;
background-color: #0080FF;
margin: 100px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
25% {
-webkit-transform: perspective(120px) rotateX(-90deg) rotateY(0deg);
}
25.0001% {
-webkit-transform: perspective(120px) rotateX(90deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
75% {
-webkit-transform: perspective(120px) rotateX(0) rotateY(-90deg);
}
75.001% {
-webkit-transform: perspective(120px) rotateX(0) rotateY(90deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
25% {
transform: perspective(120px) rotateX(-90deg) rotateY(0deg);
}
25.0001% {
transform: perspective(120px) rotateX(90deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
75% {
transform: perspective(120px) rotateX(0) rotateY(-90deg);
}
75.001% {
transform: perspective(120px) rotateX(0) rotateY(90deg);
}
100% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

CSS Keyframes Hover Animation Not Working In Chrome

I recently migrated my website and somewhat simple CSS hover animation stopped working in chrome.
Animations work in IE and firefox.
the animation I am referring to can be seen at:
http://a1decals.com/products-page/tech-stuff-decals/coexist-decal-sticker-operating-systems/
If you click on an image in the product gallery, it will popup to full size, then an animation takes effect while hovering.
I have a bunch of CSS animations going on without any problems and this used to work on another host.
.highslide-wrapper,
.highslide-outline,
.highslide-wrapper:hover,
.highslide-outline:hover {
background-color: rgba(0, 0, 0, 0) !important;
z-index: 99999999 !important;
}
.highslide-image {
z-index: 99999999 !important;
border-style: solid !important;
border-color: #1a00ff !important;
border: 12px solid rgb(16, 0, 240) !important;
padding: 15px !important;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
}
.highslide-image:hover {
cursor: crosshair;
z-index: 99999999 !important;
-webkit-animation-name: rotateA;
-webkit-animation-duration: 12s;
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: linear;
-moz-animation-name: rotateA;
-moz-animation-duration: 12s;
-moz-animation-iteration-count: 1;
-moz-transition-timing-function: linear;
-moz-animation-fill-mode: forwards;
-ms-animation-name: rotateA;
-ms-animation-duration: 12s;
-ms-animation-iteration-count: 1;
-ms-transition-timing-function: linear;
animation-name: rotateA;
animation-duration: 12s;
animation-iteration-count: 1;
transition-timing-function: linear;
}
#keyframes rotateA {
35% {
-webkit-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-moz-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-o-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-ms-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
background-color: rgba(0, 0, 0, 0) !important;
}
40% {
-webkit-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-o-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
background-color: rgba(0, 0, 0, 0) !important;
}
50% {
-webkit-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-o-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
background-color: rgba(0, 0, 0, 0) !important;
}
55% {
-webkit-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-o-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
}
60% {
-webkit-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-o-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
background-color: rgba(212, 36, 36, 0.8);
}
100% {
-webkit-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-o-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
background-color: rgba(212, 36, 36, 0.8);
}
}
tried clearing browser cookies, tried different computers and webkit phone browsers.
At my old host everything worked fine on all browsers, and this is a backup copy migrated to a new server.
i tried deactivating most all plugins, i tried removing a content type header tag.
i tried inserting css for the non hover state with
transform: rotate(0deg)
and transform:scale(1)
i tried changing the position of the image class and the container class to
position: relative !important;
instead of absolute.
i inspected the elements to look for anything blocking the mouse hover.
since this is new hosting from siteground.com, they have a great wordpress enviornment for shared hosting compared to hostgator.com maybe it has something to do with the hosting enviornment so i had a ticket with this issue addressed and they confirmed the problem and after checking they couldnt pinpoint a problem, they also pointed me to an article that didnt solve the problem.

the problem was with the animation coding.
i didnt declare the #-webkit-keyframes rotateA part, only wrote the lines that make it up.
whats strange is this worked on phones and pcs for a long time and just stopped recently.
#-webkit-keyframes rotateA {
35% {
-webkit-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-moz-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-o-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-ms-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
background-color: rgba(0, 0, 0, 0) !important;
}
40% {
-webkit-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-o-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
background-color: rgba(0, 0, 0, 0) !important;
}
50% {
-webkit-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-o-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
background-color: rgba(0, 0, 0, 0) !important;
}
55% {
-webkit-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-o-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px);
}
60% {
-webkit-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-o-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
background-color: rgba(212, 36, 36, 0.8);
}
100% {
-webkit-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-moz-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-o-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
-ms-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px);
background-color: rgba(212, 36, 36, 0.8);
}
}

CSS Animations not fully displaying in safari

So I'm new to using CSS animations and thought I'd play around to learn it. I can get everything displayed and working fine in Chrome but I'm having difficulty getting it to display properly if FF and Safari. (In FF the foreground animation doesn't work and in Safari only the rotate works.)
My HTML is basic:
<html>
<head>
<title>Happy Birthday!</title>
<link rel="stylesheet" href="styles.css" media="all" />
</head>
<body>
<div class="wrapper">
<div class="carebear"></div>
</div>
<div class="foreground"></div>
<div class="midground"></div>
<div class="background"></div>
</body>
</html>
And my CSS:
html {
background: url('bg.jpg') 0 100% repeat-x;
width:100%;
height: 100%;
}
.carebear {
background: url('care3.png')0 0 no-repeat;
width: 295px;
height: 274px;
-webkit-animation: float 1.8s linear infinite both;
-moz-animation: float 1.8s linear infinite both;
-o-animation: float 1.8s linear infinite both;
animation: float 1.8s linear infinite both;
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
}
#-webkit-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#-moz-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#-o-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
.wrapper {
-webkit-animation: move 10s ease-in-out infinite both;
-moz-animation: move 10s ease-in-out infinite both;
-o-animation: move 10s ease-in-out infinite both;
animation: move 10s ease-in-out infinite both;
position: absolute;
top: 15%;
left: 25%;
z-index: 3;
}
#-webkit-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#-moz-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#-o-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
.foreground, .midground, .background {
width: 100%;
height: 100%;
position: absolute;
bottom: 0; left: 0;
}
.foreground {
-webkit-animation: parallax_fg linear 10s infinite both;
-moz-animation: parallax_fg linear 10s infinite both;
-o-animation: parallax_fg linear 10s infinite both;
animation: parallax_fg linear 10s infinite both;
background: url('cloud-front.png') 0 100% repeat-x;
z-index: 4;
}
#-webkit-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#-moz-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#-o-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
.midground {
-webkit-animation: parallax_mg linear 20s infinite;
-moz-animation: parallax_mg linear 20s infinite;
-o-animation: parallax_mg linear 20s infinite;
animation: parallax_mg linear 20s infinite;
background: url('cloud-middle2.png') 0 100% repeat-x;
z-index: 2;
}
#-webkit-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#-moz-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#-o-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
.background {
background-image:
url('bg.jpg');
background-repeat: repeat-x;
background-position: 0 100%;
z-index: 1;
-webkit-animation: parallax_bg linear 40s infinite;
-moz-animation: parallax_bg linear 40s infinite;
-o-animation: parallax_bg linear 40s infinite;
animation: parallax_bg linear 40s infinite;
}
#-webkit-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#-moz-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#-o-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
Thanks for your help!