Thread: CSS Animation

    #1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    238
    Rep Power
    64

    CSS Animation


    Two images, on "on top" of the other. The top image has opacity. Can CSS be used to animate the top layer?

    For example, the bottom layer is an image of a light bulb.

    The top layer is the light bulb filament.

    The CSS animation turns the top layer on and off as if the filament was flickering...

    Doable?

    Add JS and make the flicker "random"?
  2. #2
  3. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,829
    Rep Power
    9646
    Yes. And if you layer more than one of those top images, you can give each one a particular animation... what's the word... timing function such that visually they all work together to simulate "random" flickering. It would repeat after a while but at least at a casual glance it would look cool.

    MDN (check timing functions in particular)

    What I'm thinking is, you have looped timing functions that show opacity at 95-100% and durations of, like, 2.1 seconds, 2.5 seconds, 3.1 seconds, and so on. They're not supposed to overlap.

    Make sense?
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    238
    Rep Power
    64
    This should be a fairly easy one, once I sink my teeth into the CSS, I have an image of an old-fashioned light bulb, and a layer of the filament that glows. I want the filament to flicker on and off.

    A loop is quite fine as long as within the loop it "looks" random.

    I suspect if I wanted to put the effort into JavaScript, I could make it "random", but that's too much effort for what I want to achieve.
  6. #4
  7. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,829
    Rep Power
    9646
    Examples of how transitions work

    Start with just one top layer (the illumination) and get that working in CSS. First get a pulsing effect by being transparent at the beginning of the cycle and opaque at the end; I don't remember exactly how but it's something like
    Code:
    .top-layer { animation-direction: alternate; animation-duration: 2s; animation-name: foobar; animation-iteration-count: infinite; }
    
    @keyframes foobar {
      from { opacity: 0.0; }
      to { opacity: 1.0; }
    }
    Code:
    <img class="top-layer" src="/path/to/top-layer-image.png">
    You can adjust the time spent "off" and "on" by adjusting the keyframes so that it spends more of the time transparent and less time opaque.
    Code:
    @keyframes foobar {
      0% { opacity: 0.0; }
      80% { opacity: 0.0; }
      100% { opacity: 1.0; }
    }
    Play around with the duration and the @keyframes.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2018
    Location
    2408 Oakmound Road,Chicago, IL, 60641
    Posts
    9
    Rep Power
    0

    CSS Animation


    Originally Posted by Arty Zifferelli
    Two images, on "on top" of the other. The top image has opacity. Can CSS be used to animate the top layer?

    For example, the bottom layer is an image of a light bulb.

    The top layer is the light bulb filament.

    The CSS animation turns the top layer on and off as if the filament was flickering...

    Doable?

    Add JS and make the flicker "random"?
    Hey there, you have many options in CSS to fix the problem. You can use Z-index property of CSS to solve it. A z-index property can help you to create more complex webpage layouts. This property is used along with the position property to create an effect of layers.

IMN logo majestic logo threadwatch logo seochat tools logo