CSS Animation

I was wondering about pre-loader, image pop-ups, dynamic/moving SVG elements, etc. This made me read about animation and here are the basics I have covered so far...

Animation is the property that is used to transition CSS properties of a particular tag from one property to another over a particular period of time.

Animation can be broken down into two parts:

CSS and a keyframe

CSS - is used to give CSS property that should be applied while the tag is under animation process i.e while animation applied what property should be applied to a tag

keyframe - is used to define the animation. It is composed of two or more values, a starting and an ending frame of 100% between which a style can be applied as an option

Let’s look at all animation properties and shorthands :

🔷 animation-name: [ <none> | <custom-value> ]

• This is the property which species one or more name of @ keyframe .

• More than one value should be comma-separated.

🔷 animation-duration: <time>

• This property sets the time to be taken to complete one cycle of an animation.

• possible values are zero or positive numbers with ‘s’ or ‘ms’.

• The default value is ‘0s’ which indicates no animation should occur.

🔷 animation-delay: <time>

• This property specifies what should be a time delay before the beginning of the animation cycle over an element.

• Possible values are zero, +ve value, -ve values . +ve values delays the animation start by s/ms, zero starts the animation immediately and -ve value begins the animation cycle immediately but animation starts s/ms .

• Values can be given in s and ms

🔷 animation-iteration-count: infinite | <number>

• This property specifies the number of counts an animation attached should complete before its end.

• The animation-iteration-count property is specified as one or more comma-separated values.

• If multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used.

🔷 animation-fill-mode: none | forwards | backwards | both

• This property specifies whether the properties applied during the animation cycle should be retained or to get back original properties after the animation is completed.

• none - this value will not apply any property specified during the animation cycle while it’s not executing

• forwards - this value retains the applied properties after its execution

• backwards - this value applies properties specified in the first relevant keyframe in the animation-delay period. Once execution is finished it gets backs to the original property.

• both: The animation will follow the rules for both forwards and backward, thus extending the animation properties in both directions.

🔷 animation-direction: normal | reverse | alternate | alternate-reverse

• Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.

• normal - this value sets the animation cycle to repeat from beginning i.e from 0% to 100% and back again to 0%

• reverse - this value sets the animation cycle to start and repeat from 100% to 0%

• alternate - this value sets the animation cycle start and repeats from 0% to 100% alternatively

• alternate-reverse - this value sets the animation cycle start from 100% and to 0% alternatively

🔷 animation-play-state: running | paused

• This property determines whether an animation is running or paused.

• Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

🔷 animation-timing-function:

<easing-function># where <easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?) where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end

• This property sets how an animation progresses through the duration of each cycle.

🔷 animation: <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

• this is the shorthand for all animation properties

• Always first value specified with s/ms will be taken as animation-duration and second as animation-delay

• animation-name should be CSS properties name

• one or more comma-separated animations are taken as values

Defining the animation sequence using keyframes

• We define the CSS style property that an element should be applied while it’s under the cycle of animation using @keyframes rules. Each keyframe describes how the animated element should render at a given time during the animation sequence.

• Timing of the animation is defined inside keyframes in percentage and inside those timing defined a CSS style property which will be applied at that timing.

• 0% /from - start and 100%/to - final state of animation. In between these, you can define any timing sequence like 25%, 50% along with defining CSS styles.

@keyframes <animation-name> {
from{
css-property:value;
}
to{
css-property:value;
}
}

How to give multiple animation properties:

• Multiple animations can be given as comma-separated values. each with name, count, delay, and duration.

• If properties assigned are in equal number each will take up corresponding equal numbered value in each property.

• If there are 3 animation names and a single duration all 3 will be applied to the same duration

• If there are 3 value in one property and 2 in another, then the value taken will cycle back i.e if there is 3 value for names and 2 value for the duration then the first 2 will take the first 2 duration and 3rd will cycle back to 1st.

eg:

animation-name: cycleMe, fadeInOut,bounceMe;

animation-duration: 2s,3s;

cycleMe takes 1st and fadeInOut takes 3s and bounceMe takes 2s.

♿ Accessibility concern:

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, migraine, and Scotopic sensitivity.

Few of the examples I practiced to make animation handy:

🔢 Pre-loader

🔢 Text growing

🔢 Zooming image

Hope this article is useful 😀......

Suggestions and add-ons are most welcome.

Say Hi to me on Twitter and LinkedIn