[go: up one dir, main page]
Scribd
Upload
18 views26 pages

unit_2

Animation is the technique of creating the illusion of motion through a sequence of images or drawings. Key concepts include 'start state' and 'end state' for defining initial and final properties, and 'interpolation' for smooth transitions. CSS animations and transitions allow for controlling the movement and appearance of web elements using properties like @keyframes, animation-duration, and animation-timing-function.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views26 pages

unit_2

Animation is the technique of creating the illusion of motion through a sequence of images or drawings. Key concepts include 'start state' and 'end state' for defining initial and final properties, and 'interpolation' for smooth transitions. CSS animations and transitions allow for controlling the movement and appearance of web elements using properties like @keyframes, animation-duration, and animation-timing-function.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Animation

Animation is the process of creating an illusion of motion and shape change by means of rapid
display of various type of pictures that were made to create a single scene.
The simulation of movement created by a series of pictures is animation. But how it actually
works is a bit more complicated than that. Before we get to the various types of animated
motion pictures,
Animation is a method of photographing successive drawings, models, or even puppets, to
create an illusion of movement in a sequence.

"Start state" and "End state”


"start state" and "end state" define the initial and final positions or properties of an element,
while "interpolation" refers to the process of creating smooth transitions between these states,
generating intermediate values.
• Start State:
The initial appearance or properties of an element before the animation begins.
• End State:
The final appearance or properties of an element after the animation completes.
• Interpolation:
The process of calculating and generating the intermediate values or states between the start
and end states, creating a smooth visual transition.

Example: Imagine animating a circle moving from the left to the right side of the
screen. The start state would be the circle's initial position on the left, the end state would be
its final position on the right, and interpolation would determine the circle's position at each
frame in between.
• Web Animation: In web development, browsers handle the interpolation process, allowing
developers to focus on defining the start and end states and the duration of the animation.
• CSS Transitions: CSS transitions use interpolation to smoothly animate properties like
color, size, and position.
• Keyframes: CSS keyframes allow for more complex animations by defining multiple states
and transitions, with interpolation handling the transitions between them.
• Interpolation in other contexts: Interpolation is also used in other areas, like image
resizing, where it calculates new pixels based on surrounding ones to create a smooth, high-
quality image.
CSS Animations
CSS animations control the movement and appearance of elements on web pages. We can
animate HTML elements without using JavaScript.
• Use @keyframes to define the animation steps.
• Apply animations with properties like animation-name and animation-duration.
• Control the animation flow using animation-timing-function and animation-delay.

CSS Animation Properties


CSS animations involve several key properties:
Property Description
@keyframes The @keyframes rule in CSS is used to specify the animation
rule.
animation-name It is used to specify the name of the @keyframes describing the
animation.
animation-duration It is used to specify the time duration it takes animation to
complete one cycle.
animation-timing-function It specifies how animations make transitions through keyframes.
There are several presets available in CSS which are used as the
value for the animation-timing-function like linear, ease,ease-
in,ease-out, and ease-in-out.
animation-delay It specifies the delay of the start of an animation.
animation-iteration-count This specifies the number of times the animation will be
repeated.
animation-direction It defines the direction of the animation. animation direction can
be normal, reverse, alternate, and alternate-reverse.
animation-fill-mode It defines how styles are applied before and after animation. The
animation fill mode can be none, forwards, backwards, or both.
animation-play-state This property specifies whether the animation is running or
paused.
@keyframes Rule
The @keyframes rule defines how an element’s styles change over time during an animation.
Syntax
@keyframes animation-name {
from {
/* Initial Styles */
}
to {
/* Final Styles */
}
}

Or
@keyframes example {
0% {/* Styles settings */}
25% { /* Styles settings */}
50% { /* Styles settings */}
100% {/* Styles settings */ }
}

•The from defines the starting styles, and to defines the ending styles.
• You can also use percentage values to specify intermediate steps.
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: changeColor 3s infinite;
}

@keyframes changeColor {
from {
background-color: blue;
}

to {
background-color: green;
}
}
</style>
</head>

<body>
<div class="box"></div>
</body>

</html>
• The .box class creates a blue square and applies the changeColor animation that lasts 3
seconds and repeats infinitely.
• The @keyframes changeColor rule changes the background color from blue to green.
animation-name Property
The animation-name property specifies the name of the @keyframes animation to apply to an
element.
Syntax
animation-name: animationName;

<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}

@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example
• The .box class applies the moveRight animation to the <div>.
• The animation-name links the element to the @keyframes moveRight sequence.
• The box moves horizontally from its original position to 200px to the right over 2
seconds, repeating infinitely.
animation-timing-function propertygn
The animation-timing-function property controls the speed curve of an animation, defining
how the animation progresses over its duration.

The animation-timing-function property can have the following values:

• ease - Specifies an animation with a slow start, then fast, then end slowly (this
is default)
• linear - Specifies an animation with the same speed from start to end
• ease-in - Specifies an animation with a slow start
• ease-out - Specifies an animation with a slow end
• ease-in-out - Specifies an animation with a slow start and end

Syntax
animation-timing-function: timingFunction;

<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;// linear, ease,ease-in,ease-out, and ease-in-out.
animation-iteration-count: infinite;
}

@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(300px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example
• The .box class applies the slide animation to the <div>.
• The animation-timing-function: ease-in; makes the animation start slowly and then
speed up.
animation-delay property
The animation-delay property specifies a delay before an animation starts, controlling when
the animation begins after being triggered.
Syntax
animation-delay: time;

<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: fadeIn;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example
• The .box element is set to fade in using the fadeIn animation.
• The animation-delay: 1s; delays the start of the animation by one second.
• The animation lasts for 2 seconds and repeats infinitely.
animation-iteration-count property
The animation-iteration-count property specifies how many times an animation should repeat.
Syntax
animation-iteration-count: number | infinite;

<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: bounce 2s infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}

50% {
transform: translateY(-50px);
}

100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>

</html>
In this example
• The .box element uses the bounce animation that lasts 2 seconds.
• animation-iteration-count: infinite; makes the animation loop endlessly.
animation-direction property
The animation-direction property specifies whether an animation should play forward,
backward, or alternate between the two directions.
Syntax
animation-direction: normal | reverse | alternate | alternate-reverse;

The animation-direction property can have the following values:

• normal - The animation is played as normal (forwards). This is default


• reverse - The animation is played in reverse direction (backwards)
• alternate - The animation is played forwards first, then backwards
• alternate-reverse - The animation is played backwards first, then forwards

<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 2s infinite;
animation-direction: alternate;// normal, reverse, alternate, and alternate-reverse.
}
@keyframes move {
from {
transform: translateX(0);
}

to {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

In this example
• The .box element moves from its original position to 200px to the right.
• animation-direction: alternate; makes the animation play forward on the first iteration
and then backward on the next, creating a back-and-forth motion.
animation-fill-mode property
The animation-fill-mode property specifies how a CSS animation should apply styles to its
target before and after it is executing.
Syntax
animation-fill-mode: none | forwards | backwards | both;

The animation-fill-mode property can have the following values:

• none - Default value. Animation will not apply any styles to the element before
or after it is executing
• forwards - The element will retain the style values that is set by the last
keyframe (depends on animation-direction and animation-iteration-count)
• backwards - The element will get the style values that is set by the first
keyframe (depends on animation-direction), and retain this during the
animation-delay period
• both - The animation will follow the rules for both forwards and backwards,
extending the animation properties in both directions

<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 3s forwards;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

In this example
• The .box element moves from its original position to 200px to the right over 3 seconds.
• animation-fill-mode: forwards; ensures that the box retains the final state of the
animation after it completes.
animation-play-state property
The animation-play-state property controls whether an animation is running or paused.
Syntax
animation-play-state: running | paused;

<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: spin 4s linear infinite;
animation-play-state: paused;
}

.box:hover {
animation-play-state: running;
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example
• The .box element has a spin animation that rotates it 360 degrees over 4 seconds
infinitely.
• animation-play-state: paused; initially pauses the animation.
Animation Shorthand Property
The animation shorthand property allows you to set all animation-related properties in a single
declaration, making your CSS code cleaner and more concise.
Syntax
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];

<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 2s ease-in 1s infinite alternate forwards;
}
@keyframes move {
from {
transform: translateX(0);
background-color: blue;
}
to {
transform: translateX(200px);
background-color: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example
• The .box class uses the animation shorthand to apply the move animation.
• The animation lasts for 2 seconds, starts after a 1-second delay, runs infinitely,
alternates direction, and retains the final state.
• The box moves from its original position to 200px to the right and changes color from
blue to green smoothly.
Declaring multiple animations
Declaring multiple animations in CSS can be done using the animation shorthand property. This
allows you to specify multiple animations for a single element. Here's an example to illustrate how
you can achieve this:
Example:

<html>
<head>
<style>
.element {
animation: slide 2s ease-in-out 0s infinite alternate,
fade 3s linear 2s infinite;

width: 100px;
height: 100px;
background-color: blue;
}

@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}

@keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
In this example:

• The slide animation moves the element horizontally.


• The fade animation changes the element's opacity.

The animation property values are:

1. Animation name (slide, fade).


2. Duration (2s, 3s).
3. Timing function (ease-in-out, linear).
4. Delay (0s, 1s).
5. Iteration count (infinite).
6. Direction (alternate).

Feel free to customize the keyframes and properties to suit your needs!

CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
Transitions make up a class of animations where you only define the start state, end state, and
duration. The rest, such as interpolating between the two states, is taken care of automatically

CSS Transition Properties


The following table lists all the CSS transition properties:

Property Description

transition A shorthand property for setting the four transition properties


into a single property

transition-delay Specifies a delay (in seconds) for the transition effect

transition-duration Specifies how many seconds or milliseconds a transition effect


takes to complete

transition-property Specifies the name of the CSS property the transition effect is for

transition-timing-function Specifies the speed curve of the transition effect


How to Use CSS Transitions?
To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to


• the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default
value is 0.

The following example shows a 100px * 100px red <div> element. The <div> element has
also specified a transition effect for the width property, with a duration of 2 seconds:

!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>

transition-delay
The transition-delay property specifies a delay (in seconds) for the transition effect.
The following example has a 1 second delay before starting:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-delay Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
</html>

Transition-property
The transition-property property specifies the name of the CSS property the
transition effect is for (the transition effect will start when the specified CSS property
changes).
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>

<h1>The transition-property Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>
The transition-timing-function
The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is
default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

#div1 {transition-timing-function: linear;}


#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div:hover {
width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>

Shorthand properties & Longhand properties.


Shorthand properties allow us to write multiple properties in a single
line and in a compact way.
Examples
1.background:#000 url(images/bg.png) no-repeat left top;
2. font: italic bold 18px/150% Arial,sans-serif;
3. border: 1px solid #000;

Longhand properties allow us to write multiple properties in a


multiple line.
Examples
background-color:#000;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position:left top;
font-style:italic;
font-weight:bold;
font-size:18px;
line-height:150%;
font-family:Arial,sans-serif;

border-width: 1px;
border-style: solid;
border-color: #000;
Working with Multiple Transitions
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
}
.container:hover div {
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Multiple transitions example</h1>
<div class="container">
<div> </div>
</div>
<h2>
Hover over the above div to reduce its width and to change it into circle
</h2>
</body>
</html>
Specify the Speed Curve of the Transition
Scripted/JavaScript animations
If you want full control over what your animation does right down to how it interpolates
between states, you can use JavaScript

CSS TRANSITIONS CSS ANIMATIONS


➢ Can only move from initial to final ➢ Can move from initial to final state,
state — no intermediate steps with intermediate steps in between
➢ Can loop infinitely thanks to
➢ Can only run once animation-iteration-count property
➢ Can be triggered but can also run
automatically
➢ Require a trigger to run (like mouse
hover)

➢ Run forwards when triggered and in ➢ Can run forwards, in reverse, or


reverse when trigger is removed alternate directions

➢ Easier to use with JavaScript ➢ More difficult to use with


JavaScript
➢ Best for creating a simple change ➢ Best for creating a complex series
from one state to another of movements
How to create a basic CSS animation?
To create a basic CSS animation, define keyframes using the @keyframes rule and apply the
animation to an element using properties like animation-name and animation-duration.
What properties can be animated using CSS animations?
Most CSS properties that have numeric values or colors can be animated. Examples include
width, height, margin, padding, background-color, opacity, and transform.
What properties can be animated using CSS animations?
Most CSS properties that have numeric values or colors can be animated. Examples include
width, height, margin, padding, background-color, opacity, and transform.
What are some common uses of CSS animations?
• Animating elements on hover (buttons, images)
• Creating loading spinners
• Slide-in and slide-out effects for menus or modals
• Adding visual feedback for user actions
CSS Transform
The CSS property transform is useful in rotation, scaling, skewing, or translation of
an element. When the value of this property is anything other than none, it acts like
a containing block for elements that have position: fixed, or position:
absolute as values.

Possible values
The CSS property transform can have one of the following values:

• <transform-function>: One of more of the transform functions to be applied.


• none: Specifies no transformation to be applied.

/* Keyword value */
transform = none;

/* Functions as values */
transform = matrix(1, 2, 3, 4, 5, 6);
transform = matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform = perspective(200px);
transform = rotate(45deg);
transform = rotate3d(1, 2, 3, 35deg);
transform = rotateX(25deg);
transform = rotateY(25deg);
transform = rotateZ(25deg);
transform = translate(10px, 60%);
transform = translate3d(10px, 60%, 2em);
transform = translateX(2.5em);
transform = translateY(2in);
transform = translateZ(2in);
transform = scale(2, 0.5);
transform = scale3d(2, 1.5, 0.5);
transform = scaleX(2);
transform = scaleY(1.5);
transform = scaleZ(0.5);
transform = skew(20deg, 10deg);
transform = skewX(20deg);
transform = skewY(2rad);
/* Multiple function values */
transform = translateX(20px) rotate(20deg) translateY(10px);
transform = perspective(200px) translate(20px, 0, 20px) rotateY(5deg);

EXAMPLE:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
width: 150px;
height: 80px;
background-color: yellow;
transform: rotate(20deg);
}

div.b {
width: 150px;
height: 80px;
background-color: yellow;
transform: skewY(20deg);
}

div.c {
width: 150px;
height: 80px;
background-color: yellow;
transform: scaleY(1.5);
}
</style>
</head>
<body>

<h1>The transform Property</h1>

<h2>transform: rotate(20deg):</h2>
<div class="a">Hello World!</div>
<br>

<h2>transform: skewY(20deg):</h2>
<div class="b">Hello World!</div>
<br>

<h2>transform: scaleY(1.5):</h2>
<div class="c">Hello World!</div>

</body>
</html>

You might also like