css3 transform translet X

css3 animation translet x

by Bhabani Raju

HTML

DD

<div class="droplet"></div>

CSS

.droplet {
  background: mediumaquamarine;

  height: 10px;
  margin: 100px;
  transition: all 2s;
  transition-timing: ease-in-out;
  width: 100px;

}
.droplet:hover:after{
    width: 500px;
    transform:translateX(25px);
}


.droplet::after {
  border-bottom: 3px solid rgba(244, 106, 13, 1);
  content: "";
  display: block;
  margin-top: -60px;
  position: relative;
  top: 3px;
  transition: all 2s ease 0s;
  width: 120px;
}