Svg animation having jerk in mobile safari - html

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>

Related

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

CSS Animation Error

I am trying to create a CSS3 only animation that makes a span (one letter) look like it swings back and forth and then falls off the screen while turning. Here is my CSS:
#-webkit-keyframes swing {
10% { -webkit-transform: rotate(15deg); }
15% { -webkit-transform: rotate(-10deg); }
20% { -webkit-transform: rotate(5deg); }
25% { -webkit-transform: rotate(-5deg); }
30% { -webkit-transform: rotate(2deg); }
35% { -webkit-transform: rotate(-1deg); }
40% { -webkit-transform: rotate(0deg); }
75% { -webkit-transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
100% { -webkit-transform: rotate(15deg); -webkit-transform:translate(0, 1500px); }
}
#keyframes swing {
10% { transform: rotate(15deg); }
15% { transform: rotate(-10deg); }
20% { transform: rotate(5deg); }
25% { transform: rotate(-5deg); }
30% { transform: rotate(2deg); }
35% { transform: rotate(-1deg); }
40% { transform: rotate(0deg); }
75% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
100% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
}
.animateone {
display: inline-block;
-webkit-animation-name: swing;
animation-name: swing;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
And here is the result: Result
Why isn't the 'A' rotating as it falls?

You should write your transforms into a single statement:
#keyframes swing {
75% { transform: rotate(700deg) translate(0, 1500px); }
100% { transform: rotate(700deg) translate(0, 1500px); }
}
UPDATED
If you want rotate when falling, you should use two animations separately:
#keyframes translate {
10% { transform: translate(0, 0); }
15% { transform: translate(0, 0); }
20% { transform: translate(0, 0); }
25% { transform: translate(0, 0); }
30% { transform: translate(0, 0); }
35% { transform: translate(0, 0); }
40% { transform: translate(0, 0); }
75% { transform: translate(0, 1500px); }
100% { transform: translate(0, 1500px); }
}
#keyframes rotate {
10% { transform: rotate(15deg); }
15% { transform: rotate(-10deg); }
20% { transform: rotate(5deg); }
25% { transform: rotate(-5deg); }
30% { transform: rotate(2deg); }
35% { transform: rotate(-1deg); }
40% { transform: rotate(0deg); }
75% { transform: rotate(700deg); }
100% { transform: rotate(700deg); }
}
.rotate {
display: inline-block;
animation-name: rotate;
transform-origin: top center;
animation-duration: 5s;
animation-fill-mode: both;
}
.translate {
display: inline-block;
animation-name: translate;
transform-origin: top center;
animation-duration: 5s;
animation-fill-mode: both;
}
<header>
<h1>W.I.P.<?h1>
<h2>
A Text
<span class="translate">
<span class="rotate">A</span>
</span>
dventure
</h2>
</header>

In first place, you can only set a transform property at a time. If you want to combine 2, set them in a comma separate list. (ROX was right about this).
In the second place, order of the transforms is important. If you want the span to move while rotating, the order must be the one that you see in the snippet.
I have also changed the transform origin, to make it visually more smooth, and changed the animation to linear for the same reason. Nut of course you can adjust it as you want
#-webkit-keyframes swing {
10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;}
15% { transform: translate(0, 0px) rotate(-10deg); }
20% { transform: translate(0, 0px) rotate(5deg); }
25% { transform: translate(0, 0px) rotate(-5deg); }
30% { transform: translate(0, 0px) rotate(2deg); }
35% { transform: translate(0, 0px) rotate(-1deg); }
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;}
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;}
75% { transform: translate(0, 150px) rotate(375deg); }
100% { transform: translate(0, 150px) rotate(375deg); transform-origin: top center;}
}
#keyframes swing {
10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;}
15% { transform: translate(0, 0px) rotate(-10deg); }
20% { transform: translate(0, 0px) rotate(5deg); }
25% { transform: translate(0, 0px) rotate(-5deg); }
30% { transform: translate(0, 0px) rotate(2deg); }
35% { transform: translate(0, 0px) rotate(-1deg); }
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;}
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;}
75% { transform: translate(0, 150px) rotate(375deg); }
100% { transform: translate(0, 150px) rotate(375deg); transform-origin: top center;}
}
.animateone {
display: inline-block;
-webkit-animation: swing 3s infinite linear;
animation: swing 3s infinite linear;
transform-origin: top center;
}
<span class="animateone">A</a>

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

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.