There is such a code
div {transition: all 0.5s ease; transform: rotate (0deg)}
div: hover {transform: rotate (360deg)} & lt; div & gt; DIV & lt; / div & gt; Answer 1, authority 100%
div {
background: red;
width: 100px;
height: 100px;
transition: all 0.5s ease;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotate (360deg);
}
} & lt; div & gt; & lt; / div & gt; Answer 2, authority 100%
Use @keyframes and animation: ... infinite ... .
div {
height: 150px;
width: 150px;
background: #ddd;
transition: all 0.5s ease;
transform: rotate (0deg)
}
div: hover {
animation: move 0.5s infinite linear;
}
@keyframes move {
0% {
transform: rotate (0deg);
background: green;
}
50% {
transform: rotate (180deg);
border-radius: 50%;
}
100% {
transform: rotate (360deg);
background: yellow;
}
} & lt; div & gt; & lt; / div & gt; Answer 3, authority 50%
& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; Infinite rotating & lt; / title & gt;
& lt; style type = "text / css" & gt;
@keyframes infinite-auto-rotating {
from {
-ms-transform: rotate (0deg);
-moz-transform: rotate (0deg);
-webkit-transform: rotate (0deg);
-o-transform: rotate (0deg);
transform: rotate (0deg);
}
to {
-ms-transform: rotate (360deg);
-moz-transform: rotate (360deg);
-webkit-transform: rotate (360deg);
-o-transform: rotate (360deg);
transform: rotate (360deg);
}
}
@ -webkit-keyframes infinite-auto-rotating
/ * For Safari and Chrome * /
{
from {
-webkit-transform: rotate (0deg);
-o-transform: rotate (0deg);
transform: rotate (0deg);
}
to {
-webkit-transform: rotate (360deg);
-o-transform: rotate (360deg);
transform: rotate (360deg);
}
}
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: infinite-auto-rotating 5s linear infinite;
-moz-animation: infinite-auto-rotating 5s linear infinite;
-ms-animation: infinite-auto-rotating 5s linear infinite;
-o-animation: infinite-auto-rotating 5s linear infinite;
animation: infinite-auto-rotating 5s linear infinite;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div & gt; & lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt; Programmers, Start Your Engines!
Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.