There is such a code

div{transition: all 0.5s ease;transform:rotate(0deg)} div:hover{transform: rotate(360deg)} 
 <div>DIV</div>

How to make the block spin endlessly? Now this rotation is only when you hover the mouse.

    3 answers 3

     div { background: red; width: 100px; height: 100px; transition: all 0.5s ease; animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotate(360deg); } } 
     <div></div>

      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; } } 
       <div></div> 

         <!DOCTYPE html> <html> <head> <title>Infinite rotating</title> <style type="text/css"> @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 /* Для Safari и 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; } </style> </head> <body> <div></div> </body> </html>