CSS – Transition Tips & Tricks

I’m amazed at how CSS has changed since the last time I looked into it. Something that previously required a tone of Javascript is now possible to implement by putting a single line of CSS code:

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}

div:hover {
  background: green;
  padding: 20px;
}

That’s all it takes to transform a div from red to green and back again!

Source: http://css-tricks.com/almanac/properties/t/transition/

Advertisement