Transition Playground S2.L20

index.html

<p class="box">BORING</p>
<p class="animated box">ANIMATED</p>

style.css

.box {
  background: #9b59b6;
  height: 100px;
  width: 100px;
  line-height:100px;
  text-align: center;
  color: white;
  font-size: 17px;
  border-radius: 20px;
}

.animated {
  transition-property: background, border-radius;
  transition-duration: 5s, 1s;
}

.box:hover {
  background: #e74c3c;
  transform-origin: top left;
  transform:scale(2);
  border-radius: 50px;
}

transition-playground-s2-l20.markdown

Transition Playground S2.L20

A Pen by Steven on CodePen.

License.