Solved

How do I use CSS transitions to fade?

Posted on 2010-11-15
2
321 Views
Last Modified: 2012-05-10
I'd like to click a form button and fade in a DIV using "CSS transitions". Could someone tell me how to do this? Also, what browsers support this?

Thanks,
Zumpoof
0
Comment
Question by:zumpoof
2 Comments
 
LVL 4

Expert Comment

by:acashok
Comment Utility
0
 
LVL 7

Accepted Solution

by:
armchang earned 500 total points
Comment Utility
You can try adding this to your page css:

 input {  
 color:#000;  
 background:#f00;  
 padding:5px;  
 -webkit-border-radius: 5px;   
     
 -webkit-transition-property:color, background;  
 -webkit-transition-duration: 1s, 1s;  
 -webkit-transition-timing-function: linear, ease-in;  
}   
  
input:hover {  
color:#f00;  
background:#000;  
}  

Open in new window



References:
http://24ways.org/2009/going-nuts-with-css-transitions
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now