Transizioni animate

Transizioni animate - alternative per semplici animazioni. Con le transizioni CSS3 è possibile modificare varie caratteristiche di un elemento nello stesso tempo, l'impostando il ritardo nel tempo per ogni proprietà successiva, e la sua funzione di trasferimento. Questa tecnica può essere utilizzata sia in stato di :hover, sia  nel :focus, :checked , etc.

Passa il mouse sopra il cerchio per vedere le transizioni animate in azione.

E vediamo subito il codice

/* stili CSS*/
.prova2{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.prova1{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #F5F5F5;
  box-shadow: 0 0 0 5px #F8B83C, 0 0 0 10px #EB7722;
  transition: border-radius 1s linear, box-shadow 1s 1s ease-in-out, transform 1s 2s linear, background 1s 3s linear;
}
.prova1:hover {
  border-radius: 0;
  box-shadow: 0 0 0 10px #F8B83C, 0 0 0 25px #EB7722;
  transform: scale(1.1) rotate(45deg) ;
  background: #DACFCB;
}
/* MarkupHTML*/
<div class="prova2">
<div class="prova1"></div>
</div>

Letto 579 volte