Frontend Forever App

We have a mobile app for you to download and use. And you can unlock many features in the app.

Get it now
Intall Later

Folding Images Animation

About this Code

       Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Folding Images Animation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

HISTORY OF CSS ANIMATIONS
The inclusion of CSS animation, transitions, and transforms as Web Kit features had been announced as early as 2007. Another component of CSS3, the current draught specification run by the World Wide Web Consortium, is CSS animation (W3C).

Transitions from one CSS style configuration to another can be animated using CSS animations. Animations are made up of two parts: a style that describes the CSS animation and a series of keyframes that show the style's beginning and ending states as well as any potential middle points.

CSS animations provide three major advantages over conventional script-driven animation methods
  1. They are simple to use and don't even require JavaScript knowledge to make simple animations.
  2.  Even with a moderate system load, the animations function properly. In JavaScript, simple animations frequently don't work well. To maintain the performance as smoothly as possible, the rendering engine can use frame-skipping and other methods.
  3. By lowering the update frequency of animations running in tabs that aren't currently visible, for example, letting the browser control the animation sequence enables the browser to maximize performance and efficiency.

Example nth-child selectors

:nth-child(odd) or :nth-child(2n+1)
Represents the odd rows of an HTML table: 1, 3, 5, etc.

:nth-child(even) or :nth-child(2n)
Represents the even rows of an HTML table: 2, 4, 6, etc.

:nth-child(7)
Represents the seventh element.

:nth-child(5n)
Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0. This may seem weird at first, but it makes more sense when the B part of the formula is >0, like in the next example.

:nth-child(n+7)
Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

:nth-child(3n+4)
Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

:nth-child(-n+3)
Represents the first three elements. [=-0+3, -1+3, -2+3]

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download
Try It

Leave a Comment

You need to login first to comment.
Login
Prev
Next