Answer the question
In order to leave comments, you need to log in
Why is animation not working in google chrome?
The animation does not work only in the Google Chrome browser. Set up prefixes. What am I doing wrong please tell me.
@-moz-keyframes rotate-loading {
0 {
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate-loading {
0 {
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes rotate-loading {
0 {
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-loading {
0 {
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading * {
display: none !important;
}
.loading:after {
content: " ";
position: absolute;
height: 50px;
width: 50px;
left: 0;
right: 0;
margin: 20px auto;
border-radius: 100%;
border: 2px solid transparent;
border-color: transparent #ddd transparent #ddd;
-moz-animation: rotate-loading 1.5s linear 0 infinite normal;
-o-animation: rotate-loading 1.5s linear 0 infinite normal;
-webkit-animation: rotate-loading 1.5s linear 0 infinite normal;
animation: rotate-loading 1.5s linear 0 infinite normal;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%
}
Answer the question
In order to leave comments, you need to log in
What is zero?
animation: rotate-loading 1.5s linear 0 infinite normal;
is it animation-delay? You need to specify the postfix s to it
this is how it will work
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question