Printable View
Hello,
I'm trying to animate the opacity of an image using CSS transitions. I've googled different ways of doing this, but nothing seems to work for what I want.
What I want is this:
* Starts animating as soon as the page loads.
* animates from opacity=100% to opacity=0%.
* Repeats an infinite number of times.
Can anyone guide me as to how to get this animation to work? Thanks very much.
Can you show us what you've tried and explain why it doesn't meet your needs? A reduced demo page in something like JSFiddle, JSBin or CodePen would be fine.
Loads of examples to get you started here https://www.google.co.uk/#q=css+blink+opacity+animation
Well, there were a couple things I tried.Quote:
Originally Posted by Beverleyh
Here's the first one: https://jsfiddle.net/2wLeqyef/3/
Unfortunately, it won't link to my png for some reason, but at least you can see the code.
The problem with this one is that it would only animate if I hovered my mouse over the image. Also, even though -webkit-animation-iteration-count is set to infinite, it doesn't repeat the animation (I'm only working in Chrome at the moment, which is why I'm only experimenting with webkit).
The second one is here: https://jsfiddle.net/2wLeqyef/4/
The problem with this one is that it doesn't work at all (no animation).
Anyway, I hope you can make some sense out of this. I'll look through your link and see if I can find anything.
Thanks.
If you're going to use CSS animations, especially for such a simple shape (I take it this is for the flashing red circle from the other thread?), it would make sense to do the whole thing in CSS.
Start with a div, set background red, make it round with border-radius, then animate it using one of the demos from the search results I posted.
Using an image to blink/fade in and out https://www.google.co.uk/search?q=blink+image+using+css
First linked demo http://jsfiddle.net/r6dje/
Yes, that's exactly the effect I'm going for. Thanks for the help, Beverley.
No problem. Glad it's sorted