CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration. Sign Up for Free Build & Test Get work done quicker by building out entire projects or isolating code to test features and animations.

At the end of this article, you’ll have created a morphing animation on a toggle button using CSS transitions. Let’s begin! CSS transitions vs. keyframe animations You can add smooth motion effects with CSS alone, no JavaScript necessary, either with CSS transitions or CSS keyframe animations.