Folding Images Animation

 Folding Images Animation

Today i wanna going to create this folding images animation by using HTML & CSS only

OUTPUTS :

HISTORY OF CSS ANIMATIONS 

As early as 2007, Web Kit had announced its intent to include CSS animation, transitions, and transforms as features of Web Kit. .. CSS animation has also been put forth as a feature of CSS3, the ongoing draft specification managed by the World Wide Web Consortium (W3C).

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

There are three key advantages to CSS animations over traditional script-driven animation techniques:

1. They’re easy to use for simple animations; you can create them without even having to know JavaScript.
2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

STEPS TO CREATE :

• Create a new file and name it as fold.html
• Then Download this images and insert in to your html file

 

• Insert all the unordered and ordered list
• Adding some CSS animations to the images
• Watch the tutorial that I have teaches as step by step
• Here is the tutorial link : https://youtu.be/lXyGTKhlWwk
• Now the animation is to be ready
• I hope u enjoyed this tutorial

..THANK YOU..