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 in CSS by Edureka
• 9,940 points
15 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 in CSS by Edureka
• 9,540 points
48 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 in CSS by Edureka
• 9,940 points
25 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 in CSS by Edureka
• 9,940 points
11 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 in CSS by Edureka
• 9,940 points
19 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 in CSS by Edureka
• 9,940 points
11 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 in CSS by Edureka
• 9,540 points
46 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 in CSS by Edureka
• 9,540 points
38 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 in CSS by Edureka
• 9,540 points
49 views
0 votes
1 answer

CSS Background Opacity

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

answered Jun 17 in CSS by Edureka
• 9,540 points
13 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 in CSS by Edureka
• 9,540 points
38 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP