• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 76
  • Last Modified:

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

How to auto start fade in an image without rollover a button.... thanks
Brian Lin
Brian Lin
1 Solution
Kim WalkerWeb Programmer/TechnicianCommented:
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

Brian LinDesignerAuthor Commented:
I probably will have more question coming up ^^
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now