CSS Keyframes Hover Animation Not Working In Chrome - hover

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

Related

Svg animation having jerk in mobile safari

I created an svg animation through online tool. I have tried it in multiple ways but not getting the proper solution.
Here is my svg code. Any help would be highly appreciated.
body {
background: #000;
}
#-webkit-keyframes SkLgXTFYahz_HJRA_JEpG_Animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
6.67% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
13.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes SkLgXTFYahz_HJRA_JEpG_Animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
6.67% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
13.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes SkLgXTFYahz_Hyy3OyEaM_Animation {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
13.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
20% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
26.67% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
33.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
46.67% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
53.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
60% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
66.67% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
73.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#keyframes SkLgXTFYahz_Hyy3OyEaM_Animation {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
13.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
20% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
26.67% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
33.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
46.67% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
53.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
60% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
66.67% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
73.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-webkit-keyframes SkLgXTFYahz_r1RiuJVaG_Animation {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
6.67% {
-webkit-transform: translate(0px, -100px);
transform: translate(0px, -100px);
}
13.33% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
20% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
26.67% {
-webkit-transform: translate(-67px, 0px);
transform: translate(-67px, 0px);
}
33.33% {
-webkit-transform: translate(-134px, 0px);
transform: translate(-134px, 0px);
}
40% {
-webkit-transform: translate(-134px, 0px);
transform: translate(-134px, 0px);
}
46.67% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
53.33% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
60% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
66.67% {
-webkit-transform: translate(67px, 0px);
transform: translate(67px, 0px);
}
73.33% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
80% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
#keyframes SkLgXTFYahz_r1RiuJVaG_Animation {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
6.67% {
-webkit-transform: translate(0px, -100px);
transform: translate(0px, -100px);
}
13.33% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
20% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
26.67% {
-webkit-transform: translate(-67px, 0px);
transform: translate(-67px, 0px);
}
33.33% {
-webkit-transform: translate(-134px, 0px);
transform: translate(-134px, 0px);
}
40% {
-webkit-transform: translate(-134px, 0px);
transform: translate(-134px, 0px);
}
46.67% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
53.33% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
60% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
66.67% {
-webkit-transform: translate(67px, 0px);
transform: translate(67px, 0px);
}
73.33% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
80% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
#-webkit-keyframes rkXxQTYYTnG_Animation {
0% {
opacity: 1;
}
13.33% {
opacity: 0;
}
93.33% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes rkXxQTYYTnG_Animation {
0% {
opacity: 1;
}
13.33% {
opacity: 0;
}
93.33% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes rkOXaYYa3M_BJVcuJNTf_Animation {
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
46.67% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
53.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
60% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
86.67% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
93.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#keyframes rkOXaYYa3M_BJVcuJNTf_Animation {
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
46.67% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
53.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
60% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
86.67% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
93.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-webkit-keyframes rkOXaYYa3M_rJf9u1Eaf_Animation {
40% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
46.67% {
-webkit-transform: translate(-134px, 0px);
transform: translate(-134px, 0px);
}
53.33% {
-webkit-transform: translate(-268px, 0px);
transform: translate(-268px, 0px);
}
60% {
-webkit-transform: translate(-268px, 0px);
transform: translate(-268px, 0px);
}
80% {
-webkit-transform: translate(-268px, 0px);
transform: translate(-268px, 0px);
}
86.67% {
-webkit-transform: translate(-134px, 0px);
transform: translate(-134px, 0px);
}
93.33% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
#keyframes rkOXaYYa3M_rJf9u1Eaf_Animation {
40% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
46.67% {
-webkit-transform: translate(-134px, 0px);
transform: translate(-134px, 0px);
}
53.33% {
-webkit-transform: translate(-268px, 0px);
transform: translate(-268px, 0px);
}
60% {
-webkit-transform: translate(-268px, 0px);
transform: translate(-268px, 0px);
}
80% {
-webkit-transform: translate(-268px, 0px);
transform: translate(-268px, 0px);
}
86.67% {
-webkit-transform: translate(-134px, 0px);
transform: translate(-134px, 0px);
}
93.33% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
#-webkit-keyframes rJxXatK6hf_SkoFu1Epf_Animation {
20% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
26.67% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
33.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
60% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
66.67% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
73.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
86.67% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
93.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#keyframes rJxXatK6hf_SkoFu1Epf_Animation {
20% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
26.67% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
33.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
60% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
66.67% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
73.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
86.67% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
93.33% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-webkit-keyframes rJxXatK6hf_rJOt_14pz_Animation {
20% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
26.67% {
-webkit-transform: translate(67px, 0px);
transform: translate(67px, 0px);
}
33.33% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
40% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
60% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
66.67% {
-webkit-transform: translate(201px, 0px);
transform: translate(201px, 0px);
}
73.33% {
-webkit-transform: translate(268px, 0px);
transform: translate(268px, 0px);
}
80% {
-webkit-transform: translate(268px, 0px);
transform: translate(268px, 0px);
}
86.67% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
93.33% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
#keyframes rJxXatK6hf_rJOt_14pz_Animation {
20% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
26.67% {
-webkit-transform: translate(67px, 0px);
transform: translate(67px, 0px);
}
33.33% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
40% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
60% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
66.67% {
-webkit-transform: translate(201px, 0px);
transform: translate(201px, 0px);
}
73.33% {
-webkit-transform: translate(268px, 0px);
transform: translate(268px, 0px);
}
80% {
-webkit-transform: translate(268px, 0px);
transform: translate(268px, 0px);
}
86.67% {
-webkit-transform: translate(134px, 0px);
transform: translate(134px, 0px);
}
93.33% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
#B1XatYT3G * {
-webkit-animation-duration: 7.5s;
animation-duration: 7.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);
animation-timing-function: cubic-bezier(0, 0, 1, 1);
}
#HJrmaFt6hz {
fill: #9F2659;
}
#ryPQTtYahz {
fill: #FFFFFF;
}
#By67ptFThM {
fill: #9F2659;
}
#By1eXpKKThG {
fill: #FFFFFF;
}
#SkxxmTtYanM {
fill: #FFFFFF;
}
#HJWl7TtKphf {
fill: #FFFFFF;
}
#HkGgmaKFp3z {
fill: #FFFFFF;
}
#HkBeQpYF6nf {
fill: #FFFFFF;
}
#HJqlmaFF63z {
fill: #9F2659;
}
#S1oe7TtK6hM {
fill: #FFFFFF;
}
#rJxXatK6hf_rJOt_14pz {
-webkit-animation-name: rJxXatK6hf_rJOt_14pz_Animation;
animation-name: rJxXatK6hf_rJOt_14pz_Animation;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#rJxXatK6hf_SkoFu1Epf {
-webkit-animation-name: rJxXatK6hf_SkoFu1Epf_Animation;
animation-name: rJxXatK6hf_SkoFu1Epf_Animation;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
#rkOXaYYa3M_rJf9u1Eaf {
-webkit-animation-name: rkOXaYYa3M_rJf9u1Eaf_Animation;
animation-name: rkOXaYYa3M_rJf9u1Eaf_Animation;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#rkOXaYYa3M_BJVcuJNTf {
-webkit-animation-name: rkOXaYYa3M_BJVcuJNTf_Animation;
animation-name: rkOXaYYa3M_BJVcuJNTf_Animation;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
#rkXxQTYYTnG {
-webkit-animation-name: rkXxQTYYTnG_Animation;
animation-name: rkXxQTYYTnG_Animation;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
opacity: 1;
}
#SkLgXTFYahz_r1RiuJVaG {
-webkit-animation-name: SkLgXTFYahz_r1RiuJVaG_Animation;
animation-name: SkLgXTFYahz_r1RiuJVaG_Animation;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#SkLgXTFYahz_Hyy3OyEaM {
-webkit-animation-name: SkLgXTFYahz_Hyy3OyEaM_Animation;
animation-name: SkLgXTFYahz_Hyy3OyEaM_Animation;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
#SkLgXTFYahz_HJRA_JEpG {
-webkit-animation-name: SkLgXTFYahz_HJRA_JEpG_Animation;
animation-name: SkLgXTFYahz_HJRA_JEpG_Animation;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
<html>
<body>
<svg version="1.1" id="B1XatYT3G" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 503 401" enable-background="new 0 0 503 401" xml:space="preserve">
<g id="rJxXatK6hf_rJOt_14pz" data-animator-group="true" data-animator-type="0"><g id="rJxXatK6hf_SkoFu1Epf" data-animator-group="true" data-animator-type="2"><g id="rJxXatK6hf">
<g id="SybXptYTnG">
<g id="HyGQ6YF6nf">
<g id="HkXXaFKT3G">
<g id="SkEQaYFanf">
<path d="M110.502,168.5c-29.547,0-53.5,23.953-53.5,53.5s23.953,53.5,53.5,53.5s53.5-23.953,53.5-53.5
C164.002,192.447,140.049,168.5,110.502,168.5z" id="HJrmaFt6hz"/>
</g>
</g>
</g>
<g id="HyI7pFY6nM">
<path d="M110.502,164.5c-31.756,0-57.5,25.744-57.5,57.5s25.744,57.5,57.5,57.5s57.5-25.744,57.5-57.5
C168.002,190.237,142.258,164.5,110.502,164.5z M125.364,221.992L115.94,222l-0.007,34.499h-12.93V222h-8.626v-11.889
l8.626-0.008l-0.013-7c0-9.702,2.633-15.603,14.05-15.603h9.518v11.894h-5.951c-4.45,0-4.667,1.661-4.667,4.758l-0.014,5.951
h10.699L125.364,221.992z" id="ryPQTtYahz"/>
</g>
</g>
</g></g></g>
<g id="rkOXaYYa3M_rJf9u1Eaf" data-animator-group="true" data-animator-type="0"><g id="rkOXaYYa3M_BJVcuJNTf" data-animator-group="true" data-animator-type="2"><g id="rkOXaYYa3M">
<g id="rkYX6ttanz">
<g id="ry976tYTnz">
<g id="SJoXpKYThG">
<g id="B13Q6FK6nz">
<path d="M380.5,167.75c-29.914,0-54.25,24.339-54.25,54.25c0,29.909,24.336,54.25,54.25,54.25
c29.912,0,54.25-24.341,54.25-54.25C434.75,192.089,410.417,167.75,380.5,167.75z" id="By67ptFThM"/>
</g>
</g>
</g>
<g id="ry07aFFanG">
<path d="M380.498,233.512c6.344,0,11.516-5.162,11.516-11.512c0-2.505-0.821-4.818-2.178-6.71
c-2.091-2.899-5.493-4.802-9.332-4.802c-3.842,0-7.239,1.9-9.335,4.8c-1.361,1.89-2.176,4.204-2.179,6.709
C368.984,228.346,374.152,233.512,380.498,233.512z" id="By1eXpKKThG"/>
<polygon points="405.636,207.918 405.636,198.271 405.636,196.833 404.192,196.838 394.547,196.868
394.584,207.954 " id="SkxxmTtYanM"/>
<path d="M380.5,164.5c-31.706,0-57.5,25.797-57.5,57.5c0,31.701,25.794,57.5,57.5,57.5
c31.704,0,57.5-25.799,57.5-57.5C438,190.297,412.209,164.5,380.5,164.5z M413.2,215.29v26.774c0,6.973-5.67,12.642-12.64,12.642
h-40.121c-6.972,0-12.64-5.669-12.64-12.642V215.29v-13.35c0-6.972,5.668-12.64,12.64-12.64h40.119
c6.972,0,12.642,5.667,12.642,12.64V215.29z" id="HJWl7TtKphf"/>
<path d="M398.389,222c0,9.858-8.023,17.887-17.889,17.887s-17.886-8.028-17.886-17.887
c0-2.373,0.474-4.638,1.316-6.71h-9.763v26.774c0,3.459,2.809,6.263,6.268,6.263h40.121c3.454,0,6.27-2.804,6.27-6.263V215.29
h-9.768C397.908,217.362,398.389,219.627,398.389,222z" id="HkGgmaKFp3z"/>
</g>
</g>
</g></g></g>
<g display="none" id="rkXxQTYYTnG">
<g display="inline" id="ry4x7TKKTnz">
<path d="M245.5,269c-2.757,0-5,2.243-5,5s2.243,5,5,5s5-2.243,5-5S248.257,269,245.5,269z" id="HkBeQpYF6nf"/>
</g>
</g>
<g id="SkLgXTFYahz_r1RiuJVaG" data-animator-group="true" data-animator-type="0"><g id="SkLgXTFYahz_HJRA_JEpG" data-animator-group="true" data-animator-type="1"><g id="SkLgXTFYahz_Hyy3OyEaM" data-animator-group="true" data-animator-type="2"><g id="SkLgXTFYahz">
<g id="HywlXatK6hf">
<g id="SkugmptYpnz">
<g id="Bytx76tK62f">
<path d="M245.5,168c-29.776,0-54,24.224-54,54c0,29.774,24.224,54,54,54c29.771,0,54-24.226,54-54
C299.5,192.224,275.276,168,245.5,168z" id="HJqlmaFF63z"/>
</g>
</g>
<path d="M245.5,164.5c-31.706,0-57.5,25.794-57.5,57.5c0,31.704,25.794,57.5,57.5,57.5
c31.701,0,57.5-25.796,57.5-57.5C303,190.294,277.206,164.5,245.5,164.5z M271.149,208.841c0.028,0.569,0.042,1.143,0.042,1.717
c0,17.49-13.311,37.649-37.659,37.649c-7.474,0-14.432-2.184-20.286-5.94c1.034,0.122,2.088,0.185,3.156,0.185
c6.201,0,11.907-2.115,16.439-5.666c-5.793-0.106-10.682-3.934-12.366-9.19c0.808,0.151,1.64,0.237,2.489,0.237
c1.206,0,2.378-0.158,3.488-0.46c-6.054-1.215-10.614-6.562-10.614-12.977c0-0.056,0-0.114,0.002-0.167
c1.784,0.987,3.823,1.585,5.99,1.652c-3.547-2.37-5.883-6.422-5.883-11.013c0-2.426,0.649-4.702,1.79-6.658
c6.525,8.011,16.281,13.278,27.275,13.834c-0.228-0.973-0.341-1.98-0.341-3.019c0-7.307,5.926-13.235,13.23-13.235
c3.809,0,7.246,1.607,9.66,4.179c3.02-0.593,5.85-1.69,8.409-3.214c-0.997,3.095-3.085,5.686-5.828,7.325
c2.681-0.32,5.238-1.028,7.604-2.082C275.98,204.647,273.735,206.981,271.149,208.841z" id="S1oe7TtK6hM"/>
</g>
</g></g></g></g>
</svg>
</body>
</html>

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.

How do I make this style an external CSS/SCSS file?

I have a peculiar code here for a Javascript dropdown menu, but I think it uses some kind of dynamic CSS.
After much tinkering I got the darn thing working. The thing is, I need the CSS to be a seperate file to import into the HTML document. This is where things get tricky. I have no idea what kind of code this is as I've never worked with it before. Does anyone have any idea how I can link this CSS to my HTML document externally?
<style class="cp-pen-styles">#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
#import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
.text-center {
text-align: center;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: black;
background: #E6E6E6;
-moz-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
-webkit-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #C0C0C0;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .dropdown-menu li ul li a {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li ul li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
</style>
What do I need to keep in the HTML document to link it to the CSS document, and what do I need to save in the CSS document? You can't put the imports in a CSS document.
I already tried to save everything strating from body (..};til </script> and then making the code in the HTML:
<style class="cp-pen-styles" src="dropstyle.">#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
#import url(http://fonts.googleapis.com/css?family=Pacifico);
</style>
But that did not work for me. Any suggestions?

Taking Darren's comment and adding it here, put the link to your style sheet inside the head section like this:
<link rel="stylesheet" type="text/css" href="/path/to/the/file.css"/>
My part: To link your fonts add this to your head section:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
Just so wee can close this question :)

To link the CSS code you have posted here to a HTML document you need to do a few things.
1: Create a file with the name main.css (make sure you put it inside the same folder as the HTML file you want to link to).
2: Paste the CSS code into the main.css document you have just created
3: Go to the top of the HTML document you wish to link it to and do the following inside the head of the HTML doc.
<link rel="stylesheet" href="main.css">

Actually, your fonts imports can stay in you css file. However, in the CSS file you should NOT have the <style class="cp-pen-styles"> and </style> tags. Put everything in between them in the CSS file and then like the others mentioned, add the line below to the header:
<link rel="stylesheet" type="text/css" href="/path/to/the/file.css"/>
So your CSS file will look like this:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
#import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
.text-center {
text-align: center;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: black;
background: #E6E6E6;
-moz-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
-webkit-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #C0C0C0;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .dropdown-menu li ul li a {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li ul li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}

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