Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to auto start fade in an image without using :hover?

Posted on 2016-08-26
2
Medium Priority
?
70 Views
Last Modified: 2016-08-29
How to auto start fade in an image without rollover a button.... thanks
0
Comment
Question by:Brian Lin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 2000 total points
ID: 41772627
As with your other question, CSS3 animations do not require a button. In this case, you would set up your @keyframes definition with opacity values instead of the transform in your other question. See the other question for details.

In the following CSS style, an img tag with the id fademe would begin fading 1 second after the page loads and would gradually fade away completely over a period of 5 seconds.
img#fademe {
	animation: example 5s 1s 1 forwards;
}
@keyframes example {
	0% { opacity: 1.0; }
	100% { opacity: 0; }
}

Open in new window

1
 

Author Closing Comment

by:Brian Lin
ID: 41775548
I probably will have more question coming up ^^
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question