In this CSS flex animation tutorial how to center an element on the page is described and shown with css animations.
First of all lets begin with a div element and some css which give the element a ‘width’, ‘height’, and ‘background-color’.

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

Now to prepare for centering the ‘div’ element we need to make the page take 100% of the viewport. To do this the height of ‘html’ element and ‘body’ element needs to be set to a value 100%. This article explains why this needs to be done! Also the margin of the ‘div’ element needs to be set to a width of 0 and a height of auto. This article explains that!

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


Now the ‘div’ element is entered to the top of the page and now we can employ the flex property to finish the job.

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

Now that the ‘div’ element is perfectly centered we can now look to adding css animations to the ‘div’ element. First of all to change the colour of the element requires a @keyframe rule and three css animation rules

  1. animation-name
  2. animation-duration
  3. animation-iteration-count

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

To add a third colour at the midway point is done by adding a ‘50%’ keyframe as is done on line 23.

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

Now to change the shape of the square into a circle can be done by adding a ‘border-radius’ property with a value of ‘100px’ to the last keyframe, the ‘0%’ keyframe. Also by adding an ‘animation-timing-function‘ the speed curve of the animation can be altered. An on line 19 an ‘animation-direction’ property with a value of ‘alternate’ is added to make the animation run from square to circle and then circle to square. Basically the animation alternates from running once forward and then once in reverse.

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


More on CSS Animations and Transitions

CSS3 logo. CSS Flex Animation Tutorial

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 *