A css simple shape transition is possible by using CSS transitions.
First of all with a ‘div’ element with a class of ‘square’ is added to the html. In the css a square is created using a ‘width’, ‘height’ and ‘background-color’ property.

See the Pen cssSimpleShapeTransition1 by Daniel (@Parsons) on CodePen.

The ‘.square:hover’ pseudo element gives the square a ‘border-radius’ of ‘50%’ which makes the square transition in a circle.
Furthermore a delay can be achieved by adding a css ‘transition’. A delay will make the transition from square to a circle and back smooth and not abrupt. The ‘transition’ on line 5 needs to have the property that is affected and the duration time. In this example the property is ‘border-radius’ and the duration is ‘5s’

See the Pen cssSimpleShapeTransition2 by Daniel (@Parsons) on CodePen.

Another interesting visual effect could be to change the ‘background-color’ value on the shape transition when the shape is hovered over.

See the Pen cssSimpleShapeTransition3 by Daniel (@Parsons) on CodePen.

The shape can also grow in size and shrink again during the transition. Adding two more property values and durations to the ‘transition’ on line 5 is the first step. The second step is too add a ‘width’ and ‘height’ property with different values to the ‘.square:hover’ pseudo class. Also for effect the ‘width’ and ‘height’ values for the ‘.square’ class are reduced from ‘150px’ to ‘100px’.

See the Pen cssSimpleShapeTransition4 by Daniel (@Parsons) on CodePen.

A ‘transition-timing-effect’ can also be used to change the speed of the transition. Below on line 6 the ‘transition-timing-effect’ is set to ‘ease-in-out’.

See the Pen cssSimpleShapeTransition5 by Daniel (@Parsons) on CodePen.

The ‘ease-in-out’ value gives the transition a slow start and slow end. Compare this transition to the previous example that does not have a ‘transition-timing-function’. The difference is subtle because if a ‘transition-timing-function’ is not specified a default value of ‘ease’ is given. The ‘ease’ value has a slow start then fast and a slow finish, similar to ‘ease-in-out’. Here are some more ‘transition-timing-function’ values. First of all the ‘linear’ value.

See the Pen cssSimpleShapeTransition6 by Daniel (@Parsons) on CodePen.

The ‘linear’ value gives the transition the same speed from start to finish.

Next we can try the ‘transition-timing-function’ value of ‘ease-in’ which specifies a slow start.

See the Pen cssSimpleShapeTransition7 by Daniel (@Parsons) on CodePen.

And finally the ‘transition-timing-function’ value of ‘ease-out’ to specify a slow end.

See the Pen cssSimpleShapeTransition8 by Daniel (@Parsons) on CodePen.

Another cool thing to do is add a background image to the shape transition.

See the Pen cssSimpleShapeTransition9 by Daniel (@Parsons) on CodePen.

And another effect is to have a text-overlay appear when the shape is hovered over.

See the Pen cssSimpleShapeTransition10 by Daniel (@Parsons) on CodePen.

More on CSS Animations and Transitions

CSS3 logo. CSS  Simple Shape Transition

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *