Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Animation in CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 269
    Comment on it

    CSS animations allows us to animate transitions from one CSS style 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 along the way.

    How to Implement Animation?

    To create a CSS animation sequence, we style the element we want to animate with the animation property or its sub-properties. This lets us to configure the timing and duration of the animation, as well as other details of how the animation sequence should progress.

    The sub-properties of the animation property includes:

    1. animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence.
    2. 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.
    3. animation-duration Configures the length of time that an animation should take to complete one cycle.
    4. animation-iteration-count Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
    5. animation-name Specifies the name of the @keyframes at-rule describing the animation's keyframes.
    6. animation-play-state Lets you pause and resume the animation sequence.
    7. animation-timing-function Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
    8. animation-fill-mode Configures what values are applied by the animation before and after it is executing.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: