2 Marks

1. What is animation?
Ans: Animation is simply making pictures or objects look like they’re
moving. It's done by showing a series of images quickly, one after
another, to create the illusion of motion

2. What is interpolation?
Ans: Interpolation is a method used to estimate or create new data
points within the range of a set of known data points. In simple
terms, it helps to fill in the gaps between existing values.

3. Mention different ways of creating animations in HTML.

Ans:
 CSS Animations
 JavaScript
 HTML Canvas
 Web Animation API

4. What is keyframing in animation?

Ans: Keyframing means setting the start and end points of an
animation, and the computer automatically fills in the motion
between those points to make it smooth.

5. Give the syntax for Keyframe.

Ans: @keyframes animation-name {
from {
/* Starting styles */
}
to {
/* Ending styles */
}
}

6. What are short hand properties? Give one example.

Ans: Shorthand properties in CSS are a way to combine multiple
related CSS properties into a single line, making the code shorter
and cleaner.
Example: /* Shorthand version */
margin: 10px 15px;
 7. What are long hand properties? Give an example.
Ans: Longhand properties in CSS are when you write each individual
property separately, instead of combining them into a single
shorthand property.
Example: margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

8. What is transform property?

Ans: The transform property in CSS is used to apply transformations
to an element, such as rotating, scaling, skewing, or translating it. It
allows you to change the appearance or position of an element in
2D or 3D space.

9. What is animation property?

Ans: The animation property in CSS is a shorthand that lets you
apply multiple animation-related settings to an element. It combines
properties like the name of the animation, duration, timing function

10. What are the different components of the animation property?

Ans: The key components:
 Animation-name
 animation-duration
 animation-timing-function
 animation-delay
 animation-iteration-count

11. . How to define keyframes for an animation using the

animation property?
Ans: To define, use the @keyframes rule to specify the animation's
name and the changes at different points (from, to, or percentages).

6/8 Marks

1. Explain start state, end state and interpolation.

Ans:
i. Start State: This is the initial position, style, or condition of
an object before the animation begins. For example, a box
might start at the top-left corner of a screen or have a certain
size or color.
 ii. End State: This is the final position, style, or condition of the
object after the animation is completed. For example, the
same box might end at the bottom-right corner or change to a
new size or color.
iii. Interpolation: This is the process of filling in the frames or
values between the start state and end state to create smooth
transitions. It's like connecting the dots between the starting
and ending points to make the motion or change appear
continuous.

2. Explain different transformation functions with example.

Ans:
i. rotate (): Rotates an element around a point (default is the
center) by a specified angle.
ii. scale (): Resizes an element by scaling its width and height.
E.g.: transform: rotate(45deg); /* Rotates the element 45
degrees clockwise */
iii. translate (): Moves (translates) an element along the X
and/or Y axis.
E.g.:
iv. matrix (): Combines all transformations (translate, rotate,
scale, and skew) into one function using a matrix of values.
E.g.: transform: matrix (1, 0, 0, 1, 50, 100); /* Equivalent to
translate(50px, 100px) */
v. rotateX (), rotateY (), rotateZ () (3D rotations): Rotates
elements in 3D space.
E.g.: transform: rotate(45deg); /* Rotates the element 45
degrees along the X-axis */

3. How to apply multiple transitions? Explain with an example.

Ans: EXAMPLE:
/* Style for the element */
div {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 2s ease-in-out, transform 1s linear;
}

/* Style to trigger the transitions */

Div: hover {
background-color: red; /* Changes color smoothly over 2 seconds */
transform: rotate(45deg); /* Rotates smoothly over 1 second */
 }
Explanation: In this example:
 The background-color transition changes the color from blue to red
over 2 seconds with an ease-in-out timing function.
 The transform transition rotates the element 45 degrees over 1
second using a linear timing function.

4. Can you control the timing and duration of CSS animations? If so,
how?
Ans: Yes, you can control the timing and duration of CSS animations
using the following properties:
1. animation-duration: Specifies how long the animation should take
to complete one cycle.
o Example: animation-duration: 3s; (The animation lasts for 3
seconds).
2. animation-delay: Adds a delay before the animation starts.
o Example: animation-delay: 1s; (The animation starts 1 second
after it's triggered).
3. animation-timing-function: Determines the speed curve of the
animation, controlling how the animation progresses over time.
o Common values: ease, linear, ease-in, ease-out, ease-in-out,
or a custom cubic-Bezier function.
o Example: animation-timing-function: ease-in-out; (Starts and
ends slowly, but moves faster in the middle).

5. How can you create a basic CSS animation using keyframes?

Ans:
1. Define Keyframes: Keyframes are the blueprint for the
animation. They specify what styles an element should
have at different points during the animation. You can
use from and to (for start and end states) or
percentages (e.g., 0%, 50%, 100%) to define the
keyframes.
E.g.: @keyframes colorChange {
from {
background-color: blue; /* Starting style */
}
to {
background-color: red; /* Ending style */
}
}
 2. Apply the Animation to an Element: Use the animation
property in your CSS to attach the keyframes to an HTML
element. You can specify the animation name, duration, timing
function, iteration count, and other settings.
E.g.: div {
width: 100px;
height: 100px;
background-color: blue; /* Initial background color */
animation: colorChange 3s linear infinite;
}

6. How do you use CSS transitions to create smooth animations?

Ans: Steps to Create Smooth Animations:
1. Choose a property to Animate: Identify the CSS property you
want to transition (e.g., color, background-color, transform, opacity).
2. Apply the transition Property: Add the transition property to the
element to define the duration, timing function, and specific
property to animate.
3. Trigger the Change: Use pseudo-classes like: hover or events like:
active to trigger the state change.
E.g.: <!DOCTYPE html>
<html>
<head>
<style>
/* Default style */
div {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 2s ease-in-out;
}
</style>
</head>
<body>
<div></div>
</body>
</html>