Tutorial web

Transition

Proprietățile tranziției:

  1. transition-property: numele propietății CSS: background-color, text-shadow, color sau all
  2. transition-duration: durata tranziției: .3s, 2s, or 1.5s etc.
  3. transition-timing-function: cum se modifică viteza tranziției: ease, linear, ease-in, ease-out, ease-in-out or cubic-bezier
  4. transition-delay: o valoare opțională care determină o întârziere înainte de a începe tranziția
Exemple:
 	div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}
 
 .box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

Instrument: https://matthewlein.com/tools/ceaser