CSS3 Animations Free tutorial to learn step by step-TechSanjeet

CSS3 Animations

CSS Animations animate HTML elements transitions from one style to another.

With CSS Animations we can animate elements without having to use (or know) JavaScript. Animations have two components.

1. A style describing the CSS animation.
2. A set of keyframes that indicate the start, intermediate waypoints and end states of the animation's style.

CSS3 Animations 

The @keyframes Rule

To configure the actual appearance of the animation we need to use the @keyframes at-rule.

The @keyframes at-rule defines keyframes or waypoints along the animation sequence which controls the intermediate steps in a CSS animation.
A
Each @keyframes rule contains a style list of keyframe selectors, which specify percentages along with the animation when the keyframe occurs, and a block containing the styles for that keyframe. 0% indicates the starting state of the keyframe. 0% indicates the starting state of the animation sequence, while 100% indicates the final state of the animation. Because 0% and 100% are very important, they have special aliases: from and to.

Aside from from/ 0% and to / 100%, we can optionally include additional keyframes (e.g. 25%, 33%, 50%, 66%, 75%) that describe intermediate steps between the start and end of the animation.

To use keyframes, create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration. We also need to specify the duration of the animation using the animation- duration CSS property.

EXAMPLE:

Try it yourself code: CLICK HERE

Here is an example of using more than two percentage:

Try it yourself code: CLICK HERE

CSS3 Animation Timing Function

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

Valid Values:

1 ease: default; the animation effect starts slowly, then fast, then slowly ends

2 linear: the animation effect has the same  speed start to end

3 ease-in: the animation effect starts slowly

4 ease-out: the animation effect ends slowly

5 ease-in-out: the animation effect both start end slowly slowly

Try it yourself code: CLICK HERE

CSS3 Animation Delay

The animation-delay CSS property specifies a duration to wait before the transition effect starts.

Try it yourself code: CLICK HERE

CSS3 Repeating Animations

We can repeat a CS animation using the animation-iteration- count CSS property.

It sets the number of times an animation cycle should be played. It can take a <number>2 value or the keyword infinite, meaning the animation will be repeated indefinitely.

      

Try it yourself code: CLICK HERE

CSS3 Animation Direction

The animation-direction CSS property sets whether an animation should play forwards, backwards, or alternating back and forth.

Valid Values:

1normal: default, the animation plays forwards each cycle

2 reverse: the animation plays backwards each cycle

3 alternate: the animation reverses direction each cycle, with the first iteration being played forwards

4 alternate-reverse: the animation reverses direction each cycle, with the first iteration being played backwards

Note! We need to repeat the animation to see how it works.

Try it yourself code: CLICK HERE

CSS3 Animation Fill Mode

The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

Valid Values:

1 none: default; the animation will not apply styles to the element while it's not executing.

2 forwards: the element will retain the styles set by the last keyframe.

3 backwards: the element will retain the styles set by the last keyframe.

4 both: the element will retain the styles set by the first and last keyframes.

Try it yourself code: CLICK HERE

CSS3 Animation Play State

The animation-play -state CSS property defines whether an animation is running or paused.

Valid Values:

1 running: default; the animation is playing 
2 paused: the animation is paused

Try it yourself code: CLICK HERE

CSS3 Animation- Shorthand

The animation CSS property is a shorthand for the following:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

It is recommended to always use the animation property rather than set its individual sub
properties.

The code below..

....CAN BE SHORTENED TO...

div {

      animation: my animation 3s linear 1s infinite alternate;

}

Try it yourself code: CLICK HERE

Note! Only the animation-name and animation-duration CSS properties are required.

CSS3 ANIMATIONS EXAME TIME

A. Which defines the keyframes or waypoints of the animation sequence?

@KEYFRAMES
@WAYPOINTS

... Answer is A)
@KEYFRAMES

B. Which defines how the animation progresses through the duration of each cycle?

Transition-timing-furnction
Animation-timing-function

... Answer is B)
Animation-timing-function

C. Does the output of the following the same?

YES
NO

... Answer is A)
YES

D. Which of the following defines the duration of the animation?

Transition-duration
Animation-duration

... Answer is B)
Animation-duration