Scribd
Upload
15 views

CSS Animation

learn About Css in deails

Uploaded by

jahanvi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

CSS Animation

learn About Css in deails

Uploaded by

jahanvi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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:

You might also like