MwGZOX

index.html

<div class="expanding_box">Expanding</div>

<br>
<br>

<div class="box">Background</div>

MwGZOX.markdown

MwGZOX

A Pen by Captain Anonymous on CodePen.

License.

style.css

/**expanding transition styles**/
.expanding_box {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 6px;
  text-align: center;
  line-height: 80px;
  /** transition height and width of the box **/
  -webkit-transition: width 2s, height 4s;
  transition: width 2s, height 4s;
}

.expanding_box:hover {
  width: 300px;
  height: 300px;
}

/**background color changing transition**/
.box {
  background: #2db34a;
  border-radius: 6px;
  cursor: pointer;
  height: 95px;
  line-height: 95px;
  text-align: center;
  /*transitions*/
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
  width: 95px;
}

.box:hover {
  background: #ff7b29;
}