CSS3 Animations

  • Transforming shapes
  • Changing colours and gradients
  • Animations
  • How to programme animations with simple maths
  • An opportunity to practise live on CodePen

CSS3, the latest version of CSS - Cascading Style Sheet - determine how HTML elements are displayed on a web page, smartphone app or tablets has revolutionised the visual appeal and functionality of the web pages.

On one hand, it is easy to learn; On the other hand, it has the potential to evolve and then pose a serious threat to utilities, which require the installation of plug-ins.

With CSS3, we can easily create smooth animations by using a few lines of code that work on multiple platforms; by manipulating DOM, animations can be used interactively with ease.

This CSS3 tutorial will provide you with the following:

The major browsers do not behave in a consistent manner when it comes to CSS3 animations, which could be frustrating for someone who learns them for the first time. The vendors, however, have provided us with vendor-prefixes to deal with the issue. They are as follows:

  • -webkit-tranform: - for Google Chrome and Apple Safari
  • -moz-transform: - for Mozilla Firefox
  • -o-transform: - for Opera
  • transform: for others

Adding the above prefixes, the animation will work on all major browsers. In order to experiment with these animations, please use Google Chrome, on which they work smoothly.

Moving Circle - mouse over

Place the mouse over the circle and it will move and change the colour from red to blue. This is achieved by transform:tranlateX() property along with the background: property.

See the Pen rVVNQG by VivaxSolutions (@VivaxSolutions) on CodePen.

Turning a Square into a Circle - mouse over

In order to produce this animation effect, the border-radius property of div element is changed from 0% to 50%. The animation effect is created with hoverselector, which responds to mouse-overevent.

See the Pen RPPwby by VivaxSolutions (@VivaxSolutions) on CodePen.

Becoming Transparent - mouse over

This effect is easily produced with transform:opacity property - from 0 to 1.

See the Pen WvvNON by VivaxSolutions (@VivaxSolutions) on CodePen.

Letter Box

The animation is created with @keframes and CSS transform properties.

See the Pen VLMxrd by VivaxSolutions (@VivaxSolutions) on CodePen.

Rotating Fan - mouse over

This effect is produced by transform:rotate(xdeg) property where x is the angle in degrees.

See the Pen bddGzV by VivaxSolutions (@VivaxSolutions) on CodePen.

Drone Manoeuvres - mouse over

This effect is produced by transform:translate(x,y) property where x and y are in pixels.

See the Pen XbbJmq by VivaxSolutions (@VivaxSolutions) on CodePen.

CSS3 Keyframes Animation - falling coconut

This effect is produced by keyframes in CSS3.

See the Pen waaGgm by VivaxSolutions (@VivaxSolutions) on CodePen.

CSS3 Keyframes Animation - the Moon orbiting the Earth

This effect is produced by keyframes in CSS3.

See the Pen xGGExJ by VivaxSolutions (@VivaxSolutions) on CodePen.

CSS3 Keyframes Animation - rotating Mars with polar ice cap

This effect is produced by keyframes in CSS3.

See the Pen mJJrBJ by VivaxSolutions (@VivaxSolutions) on CodePen.

CSS3 Keyframes Animation - tank warfare

The animation is produced by CSS3 transform property and @keyframes.

See the Pen vOWxNW by VivaxSolutions (@VivaxSolutions) on CodePen.

CSS3 Keyframes Animation - the death of a small star

The animation is produced by CSS3 transform property, @keyframes along with JavaScript.

See the Pen MwZQRE by VivaxSolutions (@VivaxSolutions) on CodePen.

 

CSS Tutorial

 

 

 

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Email: 

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Advertisements

Advertisement