Write the CSS to make a <div> element slowly increase in opacity from 0 to 1 over a period of 3 seconds when the page loads.Video of the animation: /storage/api/v1/download/2c4d8440-e413-08db-182c-bd9009e6f844(mp4, 150 KB)HTML and CDD fragment as follows:<!DOCTYPE html><html><head> <style> <!-- write your CSS below --> </style></head><body> <div class="eleopacity">Coming soon</div></body></html>
Question
Write the CSS to make a <div> element slowly increase in opacity from 0 to 1 over a period of 3 seconds when the page loads.Video of the animation: /storage/api/v1/download/2c4d8440-e413-08db-182c-bd9009e6f844(mp4, 150 KB)HTML and CDD fragment as follows:<!DOCTYPE html><html><head> <style> <!-- write your CSS below --> </style></head><body> <div class="eleopacity">Coming soon</div></body></html>
Solution
Sure, here is the CSS code you need to add in the style tags to create the desired effect:
.eleopacity {
opacity: 0;
animation: fadeIn 3s ease-in forwards;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
This CSS code defines an animation named fadeIn that changes the opacity of the element from 0 to 1 over a period of 3 seconds. The forwards keyword means that the element will retain the style values from the last keyframe when the animation ends. The fadeIn animation is applied to the div element with the class eleopacity.
Similar Questions
You are creating a web page that will have an image on it. You want to play a series of CSS changes over specific time increments and control the pacing of these changes.What animation technique should you use?1 pointAnimate Transform TransitionsKeyframe animations
You are creating a web page with a div element formatted to look like a red box. When the user hovers over the element, the width of the element should expand slowly to 300% of the original size. You are creating a style rule for the transition:What should you type in the blank space? 1 point300%speedgrowwidth
What is one technique to optimize website loading speed?(2 Points)Using larger image filesMinifying CSS and JavaScript filesIncluding all scripts in the HTML fileUsing inline styles for all elements
What are Animation Formats on web
Which action can significantly improve a website's page load time? *A. Increasing the number of imagesB. Compressing images and minifying CSS/JS filesC. Adding more videos to the homepageD. Writing longer articles
Upgrade your grade with Knowee
Get personalized homework help. Review tough concepts in more detail, or go deeper into your topic by exploring other relevant questions.