Results 1 to 6 of 6

Thread: help with css opacity transition

  1. #1
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default help with css opacity transition

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    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.

    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.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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/
    Last edited by Beverleyh; 12-03-2015 at 08:40 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Yes, that's exactly the effect I'm going for. Thanks for the help, Beverley.

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    No problem. Glad it's sorted
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Replies: 5
    Last Post: 02-08-2014, 08:43 PM
  2. Replies: 8
    Last Post: 12-01-2013, 11:40 PM
  3. Page transition
    By Bengal313 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-03-2008, 04:23 AM
  4. transition
    By angel_kisses_xoxo in forum HTML
    Replies: 14
    Last Post: 03-07-2006, 11:50 PM
  5. Transition Sampler
    By lassew859 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-09-2006, 06:46 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •