Бесконечная анимация CSS

210

17 января 2018, 15:16

Есть такой код

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

<div>DIV</div>

Как сделать, чтобы бесконечно вертелся блок? Сейчас такое вращение только при наведении указателя мыши.

Answer 1

Используйте @keyframes и 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>

Answer 2

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>

Answer 3

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