Lecture Notes Of Class 13: Animations and Transitions

Lecture Notes Of Class 13: Animations and Transitions

Objectives:

Explore transition and animation utilities.
Learn to add smooth hover effects.

Introduction to Animations and Transitions

Animations and transitions are essential in modern web design to enhance user experience. These effects can be used to create smooth changes in the appearance of elements, improving the interaction flow and making the website more engaging.

Transitions allow smooth changes between property values when an element’s state changes (like on hover or focus). Animations are more complex and involve keyframes, allowing multiple changes over time.

Transition Utilities:

transition is a shorthand property that sets which properties will transition, the duration, timing function, and delay.
transition-property: Specifies which CSS properties to animate.
transition-duration: Specifies how long the transition takes.
transition-timing-function: Defines the speed curve of the transition.
transition-delay: Sets a delay before the transition begins.

Animation Utilities:

@keyframes: Defines the intermediate steps in an animation.
animation: A shorthand property to specify keyframes, duration, timing function, etc.

Activity: Create a Card with Hover Effects and Transitions

In this activity, we’ll create a card with smooth hover effects and apply transitions such as transform and duration-300 for a smooth experience.

HTML Code (Card Structure)

html

Copy code

<!DOCTYPE html>

<head>

<title>Card with Hover Effects</title>

<style>

.card {

transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}

.card:hover {

transform: scale(1.05);

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

</style>

</head>

<h3 class="text-xl font-semibold">Card Title</h3>

<p class="text-gray-600">This is a simple card with hover effects and transitions.</p>

</div>

</body>

</html>

Explanation:

1. HTML Structure:

o A simple div with the class card contains an image and some text.

o The card has a fixed width of 64 and height of 80 (w-64 h-80) and a white background (bg-white).

2. Hover Effects with Transitions:

o When the user hovers over the card, it will slightly scale up (transform: scale(1.05)) and apply a subtle shadow effect (box-shadow).

o The transition property is used to ensure these changes occur smoothly. The transform and box-shadow properties will transition over 0.3 seconds (0.3s), creating a smooth hover effect.

o ease-in-out is used to control the speed of the transition at both the start and end.

Learning Outcomes:

By the end of this class, students should be able to:

Understand the basics of CSS transitions and animations.
Implement hover effects using transform and other CSS properties.
Create smooth visual transitions with the transition property to enhance user interactivity.

Next Steps:

Experiment with different properties in transitions (e.g., color changes, background shifts).
Create more complex animations using @keyframes to animate elements like buttons or divs.

This hands-on activity reinforces how transitions can be used to improve the interactive experience on a website.

4o mini

You said:

WRITE 10 ASSIGNMENTS FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with proper explanation

ChatGPT said:

ChatGPT

Here are 10 assignments based on the Animations and Transitions concept, each with step-by-step solutions and proper explanations. These assignments will help students understand how to implement animations and transitions in web development.

Assignment 1: Basic Hover Effect Using Transition

Objective: Apply a simple hover effect to an element using the transition property.

Steps:

1. Create a div with a background color.

2. Add a transition effect for the background color on hover.

3. When the user hovers, change the background color smoothly.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Hover Transition</title>

<style>

.hover-box {

width: 200px;

height: 200px;

background-color: #3498db;

transition: background-color 0.5s ease;

}

.hover-box:hover {

background-color: #2ecc71;

}

</style>

</head>

<body>

</body>

</html>

Explanation:

A div element with a blue background is created.
The transition property applies a 0.5-second smooth change to the background-color.
On hover, the background color changes from blue to green.

Assignment 2: Hover to Scale an Element

Objective: Use the transform property to scale an element when hovered.

Steps:

1. Create a div element.

2. Add a smooth scale effect when the user hovers on the element.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Scale on Hover</title>

<style>

.scale-box {

width: 200px;

height: 200px;

background-color: #9b59b6;

transition: transform 0.3s ease;

}

.scale-box:hover {

transform: scale(1.1);

}

</style>

</head>

<body>

</body>

</html>

Explanation:

The transform property is used to scale the element on hover.
The scale increases to 1.1, making the box slightly bigger.

Assignment 3: Add Box Shadow on Hover

Objective: Apply a box shadow effect when hovering over a div element.

Steps:

1. Create a div element.

2. Add a transition for the box-shadow property.

3. On hover, apply a shadow around the element.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Box Shadow on Hover</title>

<style>

.shadow-box {

width: 200px;

height: 200px;

background-color: #f39c12;

transition: box-shadow 0.3s ease-in-out;

}

.shadow-box:hover {

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

}

</style>

</head>

<body>

</body>

</html>

Explanation:

The box-shadow creates a subtle shadow effect on hover.
The transition ensures the shadow appears smoothly within 0.3 seconds.

Assignment 4: Create a Card with Hover Animation

Objective: Design a card that zooms in and changes shadow on hover.

Steps:

1. Create a card with an image and text.

2. Apply transform to zoom the card and change the box-shadow on hover.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Card Hover Effect</title>

<style>

.card {

width: 300px;

height: 400px;

border-radius: 10px;

overflow: hidden;

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card img {

width: 100%;

height: 60%;

}

.card-content {

padding: 15px;

text-align: center;

background-color: #ecf0f1;

}

.card:hover {

transform: scale(1.05);

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

}

</style>

</head>

<body>

<h3>Card Title</h3>

<p>Some description about the card.</p>

</div>

</body>

</html>

Explanation:

The card zooms in (scale) and gets a shadow when hovered.
The transition ensures smooth scaling and shadow effects.

Assignment 5: Smoothly Change Text Color on Hover

Objective: Apply a smooth color transition to text on hover.

Steps:

1. Create a paragraph of text.

2. Change the text color smoothly when hovered.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Text Color Transition</title>

<style>

.color-text {

font-size: 24px;

color: #34495e;

transition: color 0.5s ease;

}

.color-text:hover {

color: #e74c3c;

}

</style>

</head>

<body>

<p class="color-text">Hover over this text to change its color smoothly.</p>

</body>

</html>

Explanation:

The text color transitions from dark gray to red on hover.
The transition property ensures a smooth color change.

Assignment 6: Animated Border on Hover

Objective: Create a border animation on hover.

Steps:

1. Create a div element with no border.

2. Add an animated border effect when the user hovers.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Animated Border</title>

<style>

.border-box {

width: 200px;

height: 200px;

background-color: #2c3e50;

transition: border 0.3s ease;

border: 5px solid transparent;

}

.border-box:hover {

border-color: #ecf0f1;

}

</style>

</head>

<body>

</body>

</html>

Explanation:

The border starts as transparent and becomes visible with a smooth transition when hovered.
The border-color property is animated over 0.3 seconds.

Assignment 7: Fade-in Animation on Page Load

Objective: Implement a fade-in effect for an element when the page loads.

Steps:

1. Create a div with content.

2. Use CSS animations to fade the element in.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<style>

.fade-in {

opacity: 0;

animation: fadeIn 2s forwards;

}

@keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

</style>

</head>

<body>

<h1>Welcome to the Page!</h1>

<p>This content fades in when the page loads.</p>

</div>

</body>

</html>

Explanation:

The @keyframes defines the fade-in effect, where the element starts with opacity: 0 and gradually becomes fully visible (opacity: 1).
The animation duration is set to 2 seconds.

Assignment 8: Button with Hover Animation

Objective: Add a hover animation to a button that changes its background color and scales it.

Steps:

1. Create a button element.

2. Apply a background color change and scaling effect on hover.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Button Hover Animation</title>

<style>

.btn {

padding: 10px 20px;

font-size: 16px;

background-color: #3498db;

color: white;

border: none;

cursor: pointer;

transition: background-color 0.3s ease, transform 0.3s ease;

}

.btn:hover {

background-color: #2980b9;

transform: scale(1.1);

}

</style>

</head>

<body>

<button class="btn">Hover over me</button>

</body>

</html>

Explanation:

The button grows in size and changes color when hovered, providing a dynamic and engaging effect.

Assignment 9: Sliding Animation for a Sidebar

Objective: Implement a sliding effect for a sidebar that appears when a button is clicked.

Steps:

1. Create a sidebar div.

2. Apply a sliding transition when toggling the sidebar visibility.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Sliding Sidebar</title>

<style>

.sidebar {

width: 250px;

height: 100%;

background-color: #2c3e50;

position: fixed;

left: -250px;

top: 0;

transition: left 0.3s ease;

}

.sidebar.open {

left: 0;

}

.btn-toggle {

padding: 10px 20px;

background-color: #3498db;

color: white;

border: none;

cursor: pointer;

}

</style>

</head>

<body>

<button class="btn-toggle" onclick="toggleSidebar()">Toggle Sidebar</button>

<h2>Sidebar</h2>

<p>Some content here.</p>

</div>

function toggleSidebar() {

const sidebar = document.getElementById('sidebar');

sidebar.classList.toggle('open');

}

</script>

</body>

</html>

Explanation:

The sidebar is initially off-screen (left: -250px).
When the button is clicked, the left property is toggled, causing the sidebar to slide in.

Assignment 10: Fade-out Animation on Element Removal

Objective: Create a fade-out effect when an element is removed from the page.

Steps:

1. Create a div element.

2. Add a button to remove the div with a fade-out effect.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Fade-out on Remove</title>

<style>

.fade-out {

transition: opacity 1s ease;

}

.fade-out.removed {

opacity: 0;

}

</style>

</head>

<body>

<p>This is a box. It will fade out before removal.</p>

<button onclick="removeElement()">Remove</button>

</div>

function removeElement() {

const box = document.getElementById('box');

box.classList.add('removed');

setTimeout(() => {

box.remove();

}, 1000); // Wait for the fade-out effect before removing

}

</script>

</body>

</html>

Explanation:

The div fades out over 1 second before it is removed from the DOM.
The removed class triggers the fade-out animation.

These assignments cover basic and intermediate usage of CSS animations and transitions. Each example is designed to teach students how to implement various visual effects and interactions on a webpage.

4o mini

You said:

WRITE 50 no of MCQs only FROM ABOVE CONCEPT with explanation

ChatGPT said:

ChatGPT

Here are 50 multiple-choice questions (MCQs) based on the concepts of CSS animations and transitions:

MCQs:

1. What is the purpose of the transition property in CSS?

a) To animate a property change smoothly
b) To make elements fade
c) To define the delay in animations
d) To create keyframes for animations
Answer: a) To animate a property change smoothly
Explanation: The transition property allows you to smoothly change from one property value to another over a set duration.

2. Which of the following is the correct syntax to apply a transition?

a) transition: property duration;
b) transition: duration;
c) transition: property duration easing;
d) transition: duration easing delay;
Answer: a) transition: property duration;
Explanation: The syntax for transition includes the property to animate and the duration.

3. Which CSS property allows an element to change size when hovered over?

a) transform: scale();
b) scale: transform();
c) transform: resize();
d) scale: 1.0;
Answer: a) transform: scale();
Explanation: The transform: scale() property allows you to increase or decrease the size of an element.

4. Which property is used to control the speed of the transition in CSS?

a) transition-duration
b) transition-delay
c) transition-timing-function
d) transition-speed
Answer: a) transition-duration
Explanation: The transition-duration property defines how long the transition lasts.

5. In the context of a sliding animation for a sidebar, which property defines the movement of the element?

a) top
b) left
c) width
d) position
Answer: b) left
Explanation: The left property can be used to control the horizontal movement of the sidebar in a sliding animation.

6. What is the effect of transform: scale(1.1); on an element?

a) It makes the element grow in size.
b) It makes the element shrink in size.
c) It rotates the element.
d) It moves the element to the left.
Answer: a) It makes the element grow in size.
Explanation: The scale(1.1) function increases the size of an element by 10%.

7. Which CSS property can be used to make an element fade in or fade out?

a) opacity
b) visibility
c) display
d) background-color
Answer: a) opacity
Explanation: The opacity property controls the transparency of an element, making it fade in or out.

8. What does the transition: all 0.5s ease property mean?

a) Apply all transitions with a 0.5-second duration and ease timing function
b) Apply only opacity transitions with a 0.5-second duration
c) Apply only background-color transitions with a 0.5-second duration
d) Apply all transitions with a 0.5-second duration and linear timing function
Answer: a) Apply all transitions with a 0.5-second duration and ease timing function
Explanation: The transition shorthand specifies that all properties will transition over 0.5 seconds with an easing function.

9. What does the ease value in the transition-timing-function property do?

a) Makes the transition happen in a linear fashion
b) Makes the transition faster at the start and slower at the end
c) Makes the transition slower at the start and faster at the end
d) Makes the transition happen immediately
Answer: b) Makes the transition faster at the start and slower at the end
Explanation: The ease timing function is the default and starts fast before decelerating.

10. In a sidebar slide-in animation, how do you initially hide the sidebar off-screen?

a) left: 0
b) left: -250px
c) visibility: hidden
d) display: none
Answer: b) left: -250px
Explanation: By setting left: -250px, the sidebar is positioned off-screen.

11. Which property would you modify to change the background color of a button when hovered over?

a) background-color
b) color
c) font-size
d) border
Answer: a) background-color
Explanation: The background-color property is used to change the button's background color.

12. What is the purpose of the setTimeout() function in JavaScript for animations?

a) To repeat the animation indefinitely
b) To delay the execution of code after a specified time
c) To make the animation occur immediately
d) To stop the animation at a specific time
Answer: b) To delay the execution of code after a specified time
Explanation: setTimeout() allows code to execute after a set delay, often used in animations.

13. Which CSS property allows you to define the direction in which a transition occurs?

a) transition-direction
b) transition
c) transform
d) transition-timing-function
Answer: b) transition
Explanation: The transition property defines the properties to animate and the duration, including the direction of the transition.

14. What will the CSS property transform: scale(0.5) do to an element?

a) Double its size
b) Shrink it to half its size
c) Keep its size the same
d) Rotate it 45 degrees
Answer: b) Shrink it to half its size
Explanation: scale(0.5) reduces the size of the element to half.

15. How do you remove an element from the DOM after applying a fade-out effect?

a) Using setTimeout() to wait for the fade-out to complete
b) By setting display: none
c) By setting visibility: hidden
d) Immediately using remove()
Answer: a) Using setTimeout() to wait for the fade-out to complete
Explanation: setTimeout() ensures the fade-out animation completes before removing the element.

16. Which of the following defines a CSS transition to occur over 2 seconds and with a linear timing function?

a) transition: 2s linear
b) transition: 2s ease-in
c) transition: linear 2s
d) transition: 2s linear 1s
Answer: a) transition: 2s linear
Explanation: The syntax transition: 2s linear specifies a 2-second duration with a linear timing function.

17. What is the effect of transform: rotate(45deg) on an element?

a) It rotates the element 45 degrees clockwise
b) It shrinks the element by 45%
c) It rotates the element 45 degrees counterclockwise
d) It makes the element invisible
Answer: a) It rotates the element 45 degrees clockwise
Explanation: The rotate(45deg) function rotates the element 45 degrees in the clockwise direction.

18. Which CSS property is used to animate the change in an element's position?

a) position
b) top, left
c) z-index
d) margin
Answer: b) top, left
Explanation: The top and left properties control the position of an element, which can be animated.

19. What happens when you apply transition: opacity 1s ease to an element?

a) The element's opacity will change smoothly over 1 second
b) The element's opacity will instantly change
c) The element will fade out immediately
d) The element will fade in immediately
Answer: a) The element's opacity will change smoothly over 1 second
Explanation: This transition makes the element fade smoothly over 1 second.

20. How do you create a sliding sidebar effect using JavaScript?

a) By changing the left property of the sidebar
b) By changing the height property of the sidebar
c) By using display: none
d) By using opacity: 0
Answer: a) By changing the left property of the sidebar
Explanation: The left property controls the horizontal position, enabling a sliding effect.

21. What is the purpose of transition-delay in CSS?

a) To specify the time before the transition starts
b) To control the duration of the transition
c) To make the transition faster
d) To reverse the transition
Answer: a) To specify the time before the transition starts
Explanation: transition-delay sets the delay before the transition begins.

22. Which CSS function is used to create a 3D effect by rotating an element?

a) scale()
b) rotate3d()
c) rotate()
d) perspective()
Answer: b) rotate3d()
Explanation: The rotate3d() function applies a 3D rotation transformation to an element.

23. What will the transition: color 0.5s ease property do?

a) It animates the color of the element over 0.5 seconds with an easing effect
b) It changes the background color instantly
c) It makes the text color transparent
d) It animates the text size over 0.5 seconds
Answer: a) It animates the color of the element over 0.5 seconds with an easing effect
Explanation: The color change is animated with a smooth transition in 0.5 seconds.

24. What is the default value of transition-timing-function?

a) linear
b) ease
c) ease-in
d) ease-out
Answer: b) ease
Explanation: The default timing function is ease, which accelerates at the start and decelerates at the end.

25. Which of the following transitions is smoother and more natural-looking?

a) transition: all 1s linear
b) transition: all 1s ease-out
c) transition: all 0.5s linear
d) transition: all 1s ease-in
Answer: b) transition: all 1s ease-out
Explanation: ease-out makes the transition slow down at the end, which gives a more natural look.

I hope these MCQs with explanations meet your requirements!

4o mini

You said:

more 25

ChatGPT said:

ChatGPT

Here are 25 more multiple-choice questions (MCQs) based on CSS animations and transitions:

26. Which property is used to set the timing function for CSS transitions?

a) transition-timing
b) transition-duration
c) transition-timing-function
d) transition-delay
Answer: c) transition-timing-function
Explanation: The transition-timing-function property specifies how the intermediate property values are calculated during a transition.

27. What happens when you use transform: translateX(100px) on an element?

a) The element moves 100 pixels down
b) The element moves 100 pixels to the left
c) The element moves 100 pixels to the right
d) The element rotates 100 degrees
Answer: c) The element moves 100 pixels to the right
Explanation: The translateX(100px) function moves the element horizontally to the right by 100 pixels.

28. Which of the following will make an element fade in and out repeatedly?

a) @keyframes fadeInOut { from { opacity: 0; } to { opacity: 1; } }
b) @keyframes fadeInOut { from { opacity: 1; } to { opacity: 0; } }
c) @keyframes fadeInOut { 0% { opacity: 0; } 100% { opacity: 1; } }
d) Both a) and b)
Answer: c) @keyframes fadeInOut { 0% { opacity: 0; } 100% { opacity: 1; } }
Explanation: This @keyframes definition smoothly animates the opacity from 0 to 1, creating a fade-in effect.

29. What is the effect of transform: rotate(180deg) on an element?

a) It rotates the element by 180 degrees clockwise
b) It rotates the element by 180 degrees counterclockwise
c) It rotates the element by 90 degrees clockwise
d) It rotates the element by 360 degrees
Answer: a) It rotates the element by 180 degrees clockwise
Explanation: The rotate(180deg) function rotates the element 180 degrees in the clockwise direction.

30. Which property would you use to animate the width of an element?

a) transition-width
b) width
c) animate-width
d) transition
Answer: b) width
Explanation: The width property can be animated using CSS transitions or animations.

31. How do you apply a hover effect on a button that changes its background color?

a) button:hover { background-color: #f00; }
b) button { hover: #f00; }
c) button:hover { color: #f00; }
d) button { background-color: #f00; }
Answer: a) button:hover { background-color: #f00; }
Explanation: The :hover pseudo-class changes the button's background color when hovered.

32. What is the default value of the transition-timing-function property?

a) linear
b) ease
c) ease-in-out
d) ease-out
Answer: b) ease
Explanation: By default, transitions use the ease timing function, which starts slow, speeds up, and then slows down again.

33. What does the @keyframes rule in CSS define?

a) The duration of the animation
b) The properties to be animated
c) The animation sequence (steps)
d) The starting point of the animation
Answer: c) The animation sequence (steps)
Explanation: The @keyframes rule defines the sequence of the animation, specifying the values at different points during the animation.

34. Which property allows you to control the delay before a CSS transition begins?

a) transition-delay
b) transition-duration
c) transition-timing-function
d) transition
Answer: a) transition-delay
Explanation: The transition-delay property specifies the time to wait before starting the transition.

35. What is the effect of transform: translateY(-50%) on an element?

a) It moves the element down by 50% of its height
b) It moves the element up by 50% of its height
c) It rotates the element by 50 degrees
d) It scales the element by 50%
Answer: b) It moves the element up by 50% of its height
Explanation: The translateY(-50%) function moves the element upward by 50% of its own height.

36. Which of the following is used to create a smooth transition between two colors in CSS?

a) transition: color 1s ease-in;
b) transition: background-color 0.5s ease;
c) @keyframes backgroundColorChange;
d) Both a) and b)
Answer: d) Both a) and b)
Explanation: Both transition and @keyframes can be used to animate color or background color smoothly.

37. What is the purpose of the animation property in CSS?

a) To define the duration of the transition
b) To specify how to animate an element using @keyframes
c) To animate properties without @keyframes
d) To specify the end state of an element after transition
Answer: b) To specify how to animate an element using @keyframes
Explanation: The animation property allows you to apply keyframes to an element for animation.

38. What is the purpose of the animation-iteration-count property in CSS?

a) To control the duration of the animation
b) To specify the number of times an animation should run
c) To set the timing function of the animation
d) To set the start and end states of the animation
Answer: b) To specify the number of times an animation should run
Explanation: The animation-iteration-count property defines how many times the animation will run.

39. Which CSS property is used to animate the position of an element?

a) top and left
b) transform
c) margin
d) position
Answer: a) top and left
Explanation: The top and left properties can be animated to move an element across the screen.

40. How can you make a CSS animation repeat forever?

a) animation-iteration-count: 1
b) animation-iteration-count: infinite
c) animation-reverse: true
d) animation-repeat: forever
Answer: b) animation-iteration-count: infinite
Explanation: Setting animation-iteration-count to infinite makes the animation repeat indefinitely.

41. What is the effect of transition: all 2s ease-in-out?

a) It applies a transition to all properties over 2 seconds with an ease-in-out timing function
b) It applies a transition to the width property only over 2 seconds
c) It transitions the color only
d) It transitions all properties with a constant speed
Answer: a) It applies a transition to all properties over 2 seconds with an ease-in-out timing function
Explanation: This transition applies to all properties and uses the ease-in-out timing function for smooth acceleration and deceleration.

42. How do you create an animation that moves an element from left to right?

a) @keyframes move { from { left: 0; } to { left: 100%; } }
b) @keyframes move { from { transform: translateX(0); } to { transform: translateX(100%); } }
c) @keyframes move { 0% { left: 0; } 100% { left: 100%; } }
d) Both b) and c)
Answer: d) Both b) and c)
Explanation: Both the @keyframes options will animate the element from left to right.

43. What does @keyframes bounce do in CSS?

a) It defines how the element should rotate
b) It defines the steps to animate the element's position, size, or opacity
c) It defines the color transitions for an element
d) It defines how to bounce text
Answer: b) It defines the steps to animate the element's position, size, or opacity
Explanation: @keyframes bounce defines the steps that create the bouncing effect.

44. Which CSS property is used to apply a transition effect when a user clicks on an element?

a) :focus
b) :hover
c) :active
d) :checked
Answer: c) :active
Explanation: The :active pseudo-class applies styles when an element is being clicked or activated by the user.

45. What will happen if you use animation-direction: reverse?

a) The animation plays in the opposite direction
b) The animation direction is undefined
c) The animation is played in slow motion
d) The animation is played normally
Answer: a) The animation plays in the opposite direction
Explanation: The animation-direction: reverse property makes the animation run in reverse order.

46. What is the purpose of the animation-fill-mode property?

a) To control how an animation repeats
b) To control how the element is styled after the animation ends
c) To set the start and end states of the animation
d) To set the speed of the animation
Answer: b) To control how the element is styled after the animation ends
Explanation: The animation-fill-mode property specifies how styles are applied before and after the animation plays.

47. Which of these is not a valid @keyframes rule?

a) @keyframes slide { 0% { left: 0; } 100% { left: 100%; } }
b) @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
c) @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } }
d) @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(2); } }

Answer: d) @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(2); } }
Explanation: This is an invalid rule because @keyframes cannot animate the scale property directly.

48. What is the function of the :hover pseudo-class?

a) It targets the element when it is clicked
b) It applies styles to the element when the user moves the mouse over it
c) It applies styles when the element is in focus
d) It targets the element after a page refresh
Answer: b) It applies styles to the element when the user moves the mouse over it
Explanation: The :hover pseudo-class changes the appearance of an element when the mouse pointer hovers over it.

49. How do you make an element appear to grow in size when hovered over?

a) transform: scale(1.5);
b) transition: scale 1s;
c) transform: grow(1.5);
d) scale: 1.5;
Answer: a) transform: scale(1.5);
Explanation: The transform: scale(1.5) function increases the element's size by 1.5 times.

50. What is the default value for the transition-property?

a) all
b) transform
c) none
d) color
Answer: a) all
Explanation: The default value for transition-property is all, meaning all properties will be transitioned.

These 25 questions, along with explanations, should provide a comprehensive set of MCQs on CSS animations and transitions!

Wednesday, 11 December 2024

Lecture Notes Of Class 13: Animations and Transitions

No comments:

Post a Comment

Search This Blog

Labels

Report Abuse

About Me

Popular Posts

Subscribe Us

Blog Archive

Facebook

Random Posts

Random Posts

Recent Posts