CodePen Embed - css-trnasition

<div class="box">  
  <div class="ani transition">transition O</div>
  <div class="ani notransition">transition X</div>
 </div>

.box{
  width:300px;
}
div.ani{
  width:150px; 
  height:80px; 
  margin: 0 auto; 
  background:#ff0; 
  margin-bottom:10px; 
  text-align:center; 
  line-height:80px; 
  padding: 0 10px;
}
div.ani:hover{
  padding:0 30px; 
  background:#f00;
}
div.transition{
  transition: background 0.5s linear 0.8s,
    padding 0.3s ease 0.3s;
}

This Pen is owned by gahyun on CodePen.

See more by @gahyun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.