All CSS Transitions – Width, Height, Background, Opacity, Border, Position

Here we have collected for you all types of CSS 3 transitions, such as Width, Height, Background, Opacity, Border and Position.

Understanding and proper syntax

.div {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Width

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Height

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: height 4s; /* For Safari 3.1 to 6.0 */
  transition: height 4s;
}

div:hover {
  height: 300px;
}

Background

div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

Opacity

div{
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  opacity: 1;
}
div:hover{
  opacity: 0.2;
}

Border

div {
  border: solid 5px #ff8a00;
  transition: border-width 0.6s linear;
}

div:hover { border-width: 10px; }

Position

div {
    position:absolute;
    background:blue;
    width:200px;
    height:200px;
    top:40px;
    transition:all 1s linear;
    left:0;
}
div:hover {
    left:60px;
}