Image transition using CSS3?

The answer to your question is: No it is not possible to do this with just CSS. It can however be done with a combination of JavaScript and CSS.

Up vote 1 down vote favorite 1 share g+ share fb share tw.

I have a CSS3 button like this My Button CSS . Brownb:active { background: -moz-linear-gradient(center top , #831516, #9B4141) repeat scroll 0 0 transparent; color: #FFFFFF; } . Button:active { position: relative; top: 1px; } .

Brownb { background: -webkit-gradient(linear, left top, left bottom, from(#A55757), to(#831516)); background: -moz-linear-gradient(top, #A55757, #831516); filter: progid:DXImageTransform.Microsoft. Gradient(startColorstr='#A55757', endColorstr='#831516'); border: 1px solid #A55757; color: #D7D7D7; } . Button { border-radius: 0.5em 0.5em 0.5em 0.5em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; display: inline-block; font: bold 14px/100% Arial,Helvetica,sans-serif; margin: 0 2px; outline: medium none; padding: 0.5em 2em 0.55em; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); vertical-align: baseline; } I would like something like light just catching the face of a sharp, shiny sword and then going off.

Is it possible with CSS3? I have seen this effect many times using Flash and thats why the query. English is not my native language and so this effect might have got a name ( which obviously I don't know and so I could not google it.

) Is it possible? I am not particular about having this effect on a gradient ( plain background will do ) Fiddle here: http://jsfiddle.net/naveen/V9Rtw/ Disclaimer: This is basically a give me the codez but I am not good with CSS and so this doubt. Any pointers / nudge with the right transitions will be of tremendous help.

Update I want something like what Google implement in the search page for India. Link here: http://www.google.co. In/search?

Q=hello+world Google does this using this sprite: http://www.google.co. In/images/experiments/p1/p1sprite. Png And they place it inside a folder named experiments :) html css css3 link|improve this question edited Jul 20 '11 at 12:56 asked Jul 19 '11 at 20:28naveen10.1k42059 91% accept rate.

I cannot really picture it. – tw16 Jul 19 '11 at 22:00 I'm pretty sure that button is only visible if you've got Google+, and AFAIK most people don't (yet). – You Jul 20 '11 at 16:37.

The answer to your question is: No it is not possible to do this with just CSS. It can however be done with a combination of JavaScript and CSS. Using your Google +1 button as an example, they have a sprite and will be using JavaScript to switch the background position over a set period of time when the icon is hovered over.

An example of how to animate sprite images over time can be seen here: How to show animated image from PNG image using javascript? Like gmail .

This is perfect :) – naveen Jul 20 '11 at 17:49.

Edit: I assume that you are talking about the search button. My network didn't allow me to see the other links that you posted :(. The way that I have found quite successful with the button is to create a background image like this.

Say your image is 25px tall by 75px wide. Create an image 75px x 75 px. Put three buttons in there like this: ____________ | normal | ------------ ____________ | over | ------------ ____________ | | ------------ Then, use the background-position property to set which position you want in the image.

Also make sure that the overflow:hidden. This way, you get more control over the effect, download time is negotiable (after all, for progressive download, the make image appears first), and you are more backwards compatible, and it is cached (presumeably). I also don't know how the gradient rendering affects browser performance, but I would imagine that it could possibly have some impact.

Also, please mark as an answer if this answers your question! JMax I haven't seen a way to do this. I assume that you want this effect to be visible when they click the button, correct?

You could try changing the gradient so that it would either raise up or lower, but that would make the effect for entire way across. Here is a possible way for that: background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.32, #A55757), color-stop(0.57, #831517) ); background-image: -moz-linear-gradient( center bottom, #A55757 32%, #831517 57% ); From: gradients.glrzad.com/ Also, have you thought about using an image? I think that would give you the flexibility that you are looking.

I don't know of your targeted audience, but it might also provide better backward compatibility. JMax.

Thank you for the help. Updated with example. – naveen Jul 20 '11 at 12:57 no man.

Its the new updated +1 button for google plus. A tiny button near the link button "cached" next to each search result. I has got a good transition.

– naveen Jul 20 '11 at 14:32 I see what your meaning. I'll think about it. – JMax Jul 20 '11 at 14:49 please do that.

+1 for the help. – naveen Jul 20 '11 at 21:32 Thanks. It would have taken a bit for me to come up with that :).

A nice one to go into the repository. – JMax Jul 20 '11 at 14:53.

designlovr.com/beautiful-photoshop-like-... This might help you for a shiny effect, transitions must be made still tho.

Edit: I assume that you are talking about the search button. My network didn't allow me to see the other links that you posted :(. The way that I have found quite successful with the button is to create a background image like this.

Say your image is 25px tall by 75px wide. Create an image 75px x 75 px. Put three buttons in there like this.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.