CSS Animation
CSS allows animation of HTML elements without using JavaScript!
What are CSS Animations?
An animation lets an element gradually change from one
style to another.
You can change as many CSS properties you want, as many
times as you want.
To use CSS animation, you must first specify some
keyframes for the animation.
Keyframes hold what styles the element will have at certain
ti
In this chapter you will learn about the following properties:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.
The following example will change the background-color of the
<div> element when the animation is 25% complete, 50%
complete, and again when the animation is 100% complete:
Properties of Animation:-
Animation name The animation-name CSS prope
rty specifies one or more
animations that should be
applied to an element. Each
name indicates
an @keyframes at-rule that
defines the property values for
the animation sequence.
Animation -Duration The animation-duration CSS pro
perty specifies the length of time
that an animation should take to
complete one cycle.
animation-duration: 6s;
animation-duration:
120ms;
animation-timing-function The animation-timing-function
CSS property specifies how a CSS
animation should progress over the
duration of each cycle.
* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-
out;
animation-timing-function: ease-in-
out;
animation-timing-function: linear;
animation-timing-function: step-
start;
animation-timing-function: step-
end;
animation-delay animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
animation-fill-mode The animation-fill-mode CSS pro
perty specifies how a CSS
animation should apply styles to its
target before and after its
execution.
animation-fill-mode: none;
animation-fill-mode:
forwards;
animation-fill-mode:
backwards;
animation-fill-mode: both;
animation-iteration-count he animation-iteration-count CS
S property specifies the number of
times an animation cycle should be
played before stopping.
animation-iteration-count:
infinite;
animation-iteration-count: 3;
animation-play-state The animation-play-state CSS pr
operty specifies whether an
animation is running or paused.
animation-play-state:
running;
animation-play-state:
paused;
animation-direction The animation-direction CSS proper
ty specifies whether an animation
should play forwards, backwards,
or alternating back and forth.
animation-direction: normal;
animation-direction: reverse;
animation-direction:
alternate;
animation-direction:
alternate-reverse;
Css Grid
CSS Grid Layout is a powerful layout system in CSS that allows developers
to create complex web layouts with ease. It provides a grid-based layout
system, with rows and columns, making it easier to design web pages
without having to use floats and positioning.
Basic Concepts
A grid layout consists of a parent element, known as the grid container,
and one or more child elements, known as grid items. The grid container
is defined by setting its display property to grid or inline grid. For example:
Grid Properties
Grid Template
The grid-template-columns and grid-template-rows properties define the
columns and rows of the grid with a space-separated list of values. These
values represent the track size, and the space between them represents
the grid line. For example:
Note:- The frunit is a fractional unit, an input that automatically
calculates layout divisions when adjusting for gaps inside the grid.
Grid Gaps
The spaces between each column and row are called gaps. You can adjust
the gap size using the column-gap, row-gap, or gap properties. For
example:
Grid Lines
Grid lines are the lines between columns and rows. You can refer to line
numbers when placing a grid item in a grid container. For example:
Advanced Features
Grid Areas
The grid-template-areas property allows you to define a grid template by
referencing the names of the grid areas specified with the grid-
area property. For example:
Auto-Placement
The grid-auto-flow property controls how the auto-placement algorithm
works when placing grid items that are not explicitly positioned. For
example:
