CodePen Embed - div transition default

<div id="yellow"></div>
<div id="salmon"></div>
<div id="green"></div>
<div id="skyblue"></div>

body {
  font-size: 0;
}

#skyblue {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

#salmon {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: salmon;
  transition: width 1s ease 0.5s, margin-top 1s ease-out 0.5s;
}
#salmon:hover {
  width: 200px;
  margin-top: 100px;
}

#green {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
}

#yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

This Pen is owned by justkukaro on CodePen.

See more by @kukaro on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.