CSS Rotate Image XY - html

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">

Related

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

CSS3 transform not working on Firefox, why?

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);
}
}

css animation doesn't work in firefox

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.

Keyframes is not working in LESS mixin with LESSHat

Here is the standard CSS I am trying to produce but want to use a LESS Mixin to do the work. You can check the working demo with pure css here
Pure CSS
#keyframes rotate {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes rotate-fix {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
I'm using the same mixin as in the following post which is shown below.
.keyframes(#name, #frames) {
#-webkit-keyframes #name { #frames(); }
#-moz-keyframes #name { #frames(); }
#-ms-keyframes #name { #frames(); }
#-o-keyframes #name { #frames(); }
#keyframes #name { #frames(); }
}
I am using it like this:
.keyframes(rotate, {
0%{
.transform(rotate(0)); // This is transform mixin from LESSHat
}
100%{
.transform(rotate(180));
}
});
.keyframes(rotate-fix, {
0%{
.transform(rotate(0));
}
100%{
.transform(rotate(360));
}
});
However, it's not working. The animation of the button won't rotate. The code works fine when not including it as a mixin. Can anybody tell me what I'm missing here?
The generated CSS looks like this:
#-moz-keyframes rotate {
.....
}
#-o-keyframes rotate {
.....
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#-moz-keyframes rotate-fix {
.....
}
#-o-keyframes rotate-fix {
.....
}
#-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}

Be sure to interpolate
like this:
.keyframes(~'<keyframes-name>, <keyframes-definition>')
and take a look at Less Hat docs keyframes section.

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!