Using CSS Transitions for Animation

In this post we will present a simple method to animate items on the GUI using CSS Transitions.
A CSS transition (see the specifications in w3schools site) allows to smoothly change CSS properties over a specified period. To show a demo, we will use the demo application that I've previously described in the React Bootstrap with NavBar React Router and Styled Components post.

We have the following page:

And we want that upon click, the width of the text to change from 100% to 50%, to this view:

But we want it to animate the changes, as shown in this video:

The enable this animation, we first update the page to send property to the Text element, whether it is using full width, or only half.
Notice that we use a react hook to flip the state of the text.

import React, {useState} from 'react'
import {Text} from './style'
function Page1() {
  const [full, setFull] = useState(true)
  return (
    <Text full={full} onClick={() => setFull(!full)}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Mauris augue neque gravida in fermentum et sollicitudin. Viverra ipsum nunc aliquet bibendum enim
      facilisis gravida. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tortor consequat id porta
      nibh. Risus sed vulputate odio ut. Mollis nunc sed id semper risus in hendrerit gravida. Nulla facilisi cras
      fermentum odio. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Mi ipsum faucibus vitae
      aliquet. A lacus vestibulum sed arcu non. Laoreet id donec ultrices tincidunt arcu non sodales neque. Condimentum
      mattis pellentesque id nibh tortor id aliquet. Mauris pellentesque pulvinar pellentesque habitant morbi. At
      elementum eu facilisis sed odio.
    </Text>
  )
}

export default Page1

Next, we update the style.js to get the full property, and set the width to 50% or 100% based on the value of the full property.
This is performed in the styled components file: style.js

import styled from 'styled-components'
export const Text = styled.div`
  height: 100%;  
  color: aqua;  
  background-color: darkkhaki;
  width ${props => props.full ? '100%' : '50%'};
  transition: width 1s;
`

The real magic is in the CSS transition:

transition: width 1s;

where we specify that the width should be updated smoothly during a one second period.

The transition can act on many other CSS properties.
For example: it can act on transform property.
The following would cause an element to turn sideways in a smooth animated method:

transform: rotate(${props => props.expanded ? '90deg' : '0deg'});
transition: transform 400ms;

Final Words

CSS transition is a great method to animate items in the GUI, and it a great substitute for CSS animation. Combined with react and styled-components makes animation a child game.

Liked this post? Leave a comment...