CSS Transition

• Transition Duration
• Transition Delay
• Transition Full
• Transition Properies
• Transition All

Contoh:

tidak menggunakan transition menggunakan transition

Transition Duration

Contoh:
transition duration

/* browser Mozilla Firefox */
a.transition {
 background: #9c3;
 padding: 8px 10px;
 -moz-transition-property: background;
 -moz-transition-duration: 1.5s;
 -moz-transition-timing-function: ease;
}
a.transition:hover {
 background: #690;
}
  

<a href="" class="transition">Transition</a>
  

Hasilnya:

CSS diatas haya support untuk browser Mozilla Firefox saja sedangkan untuk yang lainya menggunakan code masing-masing contohnya: Safari -webkit- , Opera -o- , Chrome -chrome-

-webkit-transition-property: background; /*Safari*/
-chrome-transition-property: background; /*Chrome*/
-moz-transition-property: background; /*Firefox*/
-o-transition-property: background; /*Opera*/
transition-property: background; /*support all*/

-webkit-transition-duration: 1.5s; /*Safari*/
-chorome-transition-duration: 1.5s; /*Chrome*/
-moz-transition-duration: 1.5s; /*Firefox*/
-o-transition-duration: 1.5s; /*Opera*/
transition-duration: 1.5s; /*support all*/

-webkit-transiton-timing-function: ease; /*Safari*/
-chrome-transiton-timing-function: ease; /*Chrome*/
-moz-transiton-timing-function: ease; /*Firefox*/
-o-transiton-timing-function: ease; /*Opera*/
transiton-timing-function: ease; /*support all*/
  

Transition Delay

Contoh:
transition delay

a#transition {
 background: #B1383E;
 color: #fff;
 padding: 8px 10px;
 text-decoration: none;
 -moz-transition-property: background;
 -moz-transition-duration: 0.3s;
 -moz-transition-timing-function: ease;
 -moz-transition-delay: 0.5s;
 border-radius: 10px;
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
a#transition:hover {
 background-color: #28C968;
}
  

<a href="" class="transition">Transition Delaying</a>
  

Hasilnya:

Transition Delaying

Transition Full

Contoh:

a.transition {
 background: #B1383E;
 padding: 8px 10px;
 font-weight: bold;
 color: #FFF;
 text-decoration: none;
 -webkit-transition: background 0.3s ease;
 -moz-transition: background 0.3s ease;
 -o-transition: background 0.3s ease;
 transition: background 0.3s ease;
 border-radius: 10px;
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
a.transition:hover {
 background: #28C968;
}
  

<a href="" class="transition">Transition</a>
  

Hasilnya:

Transition

Transition Properties

Contoh:
Linear

a.transiton {
 background: #B1383E;
 padding: 8px 10px;
 font-weight: bold;
 color: #FFF;
 text-decoration: none;
 -webkit-transition: background 0.5s ease, color 0.2s linear;
 -chrome-transition: background 0.5s ease, color 0.2s linear;
 -moz-transition: background 0.5s ease, color 0.2s linear;
 -o-transition: background 0.5s ease, color 0.2s linear;
 border-radius: 10px;
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
a.transition:hover {
 background: #28C968;
}
  

<a href="" class="transition">Transition background linear</a>
  

Hasilnya:

Transition background linear

Transition All

Contoh:

a.transiton {
 background: #B1383E;
 padding: 8px 10px;
 font-weight: bold;
 color: #FFF;
 -webkit-transition: all 1.2s ease;
 -chrome-transition: all 1.2s ease;
 -moz-transition: all 1.2s ease;
 -o-transition: all 1.2s ease;
 transition: all 1.2s ease;
 border-radius: 10px;
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
a.transition:hover {
 background: #28C968;
}
  

<a href="" class="transition">All Transition</a>
  

Hasilnya:

All Transition