CSS3 Animations

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:

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