Using CSS for a fade-in effect on page load

0 votes

Can a text paragraph fade in on page load using CSS transitions?

I adore the way it appeared on http://dotmailapp.com/ and would love to utilize CSS to achieve a similar result. Since the domain was bought, the aforementioned effect no longer exists. On the Wayback Machine, you can view an archived version.

Illustration

This markup is present:

<div id="test">
    <p>​This is a test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

With the following CSS rule:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}​

How can the transition be triggered on load?

Jul 29, 2022 in CSS by Edureka
• 13,620 points
1,048 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

Creating a Zoom Effect on an image on hover using CSS?

Try using the following code: <style> .zoom { ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points
1,780 views
0 votes
0 answers

Fading in a background image using javascript or css on hover

I have so far been able to ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
1,033 views
0 votes
0 answers

highlighting the current page in a list of links using css / html

I am trying to amend a friend's ...READ MORE

Jul 25, 2022 in CSS by Edureka
• 13,620 points
573 views
0 votes
0 answers

How can I vertically center a div element for all browsers using CSS?

I want to center a div vertically with CSS. ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points
436 views
0 votes
0 answers

Using Flex CSS and Bootstrap for a responsive layout

I've been playing with fully responsive layouts ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
611 views
0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
993 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
586 views
0 votes
1 answer

Set opacity of background image without affecting child elements

You can utilise opacity in conjunction with ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
1,139 views
0 votes
1 answer

CSS Background Opacity

The CSS opacity property can be used ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points
728 views
0 votes
1 answer

I am not able to create CSS Dropdown menu

Use any element to open the dropdown ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
595 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP