Micheal Jackson Moonwalk Animation

Michael Jackson Moonwalk Animation 


Today we are going to make Text animations with Shadow effects and hover effects using CSS Animation..

If you are the visual learner please watch the youtube video and learn how to code this Michael Jackson Moonwalk Animation


OUTPUTS:    



Preview Video :




Tamil Tutorial : 



English Tutorial :



WHAT IS CSS ANIMATION?

          CSS allows animation of HTML elements without using JavaScript or Flash! 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.


Configuring the animation

To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in Defining the animation sequence using keyframes below.

The sub-properties of the animation property are:

animation-name
Specifies the name of the @keyframes at-rule describing the animation’s keyframes.
animation-duration
Configures the length of time that an animation should take to complete one cycle.
animation-timing-function
Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
animation-delay
Configures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-iteration-count
Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
animation-direction
Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
animation-fill-mode
Configures what values are applied by the animation before and after it is executing.
animation-play-state
Lets you pause and resume the animation sequence.

Defining the animation sequence using keyframes

Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a <percentage> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: from and to. Both are optional. If from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.

You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.


10 STEPS TO CREATE:

                               1. Create a folder and name it as Jackson.

                     2.  Next, Download the background image and the 
                
                         moonwalking Gif file.

                     3. Then, move the downloaded images towards to the                 
                         Jackson Folder.

                     4. Now, Open your IDE as VISUAL STUDIO CODE  

                         or  SUBLIME TEXT or ANY OTHER.

                     5. Within this Create two files , one for the HTML file 
            
                         and the other one is for CSS.

                     6. Name the HTML file as Moonwalk.html.

                    7. As usual, Start coding from the <html></html>tag.

                              8. Now link the style file towards to this html file by 
                
                        typing <link rel="stylesheet" href="style.css">

                    9. Now, you can start coding as by watching the 

                        YouTube Tutorial 

                        Tamil https://youtu.be/3H7hv3sWPXI
                                        
                                      English : https://youtu.be/XwpodWY8c1c

                  10. I hope You like this CSS animation.


Source code: Click here to download source file

Full Explanation:  https://youtu.be/UvSaABs0Niw


Join With us and Get Instant Updates & Source Codes

YouTube : 


Facebook :

WhatsApp Group Link : 



Telegram Group Link :


Keep Learning😉



Post a Comment

Previous Post Next Post