CSS 3 Transition Example - transition duration

by VIvek Vaishnav

HTML

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

CSS

.box1,.box2 {
  padding: 20px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  text-align: center;
  font-size: 1em;
  font-weight: 900
}
.box1:hover,.box2:hover {
  background:#f3ca63;
}
.box2 {
  transition-property: all;
  transition-duration: 3s
}