Take div with yellow background, change it to transparent, then do a CSS transition BACK to yellow.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

This should be simple/doable but I'm not a CSS transition expert.

I want to be able to toggle a CSS class on an element. Let's call it our toggle class 'flash-it'

The element starts out with background color of yellow.

When the new CSS class 'flash-it' is togged/added on that element I need it go to to transparent. then I need to ease transition it back to yellow.

When the CSS class is removed, I want it to stay at the original yellow (original background color).

Basically I'm using this to highlight elements on the screen so I just need a simple way to call attention to the clicked element for the user.

This SHOULD be really easy for anyone with CSS transitions.

Hey guys.. just starting my day here so I'll review and update in a bit.
burtonator 17 days ago
awarded to philklc

Crowdsource coding tasks.

4 Solutions


I hope the following is what you were expecting:

HTML

<div id="box" class="flash-it"></div>

CSS3

#box {
    background-color: yellow;
    width:250px;
    height: 50px;
}
.flash-it {
    animation: flasher 1s linear infinite;
}
@keyframes flasher {
    50% {
        opacity: 0;
    }
}

Here is the working demo

Let me know if modifications are required.


Here's my solution https://jsfiddle.net/farolan/cfrdvm5o

You can do it using transition or animation. See the demo.

Winning solution

This does exactly what is requested, if I understood correctly. Only the background color changes, not the whole div, and the animation starts with the background color immediately set to transparent first, before fading back in the yellow.

If needed, replace "infinite" with the number of times you want the animation to loop.

<!DOCTYPE HTML><html><head><style>
#demo {
    background-color: rgba(255,255,0,255);
    width: 200px;
    height: 200px;
}
#toggle:checked ~ #demo, /* this line is for demo purposes only */
.flash-it {
    animation: flash 1s linear infinite;
}
@keyframes flash {
    0% { background-color: rgba(255,255,0,0) }
    100% { background-color: rgba(255,255,0,255) }
}
</style></head><body>
<input id="toggle" type="checkbox"><label for="toggle">checkit</label>
<div id="demo">Test</div>
</body></html>

Here is my solution: https://jsfiddle.net/orbintsoft/ckdxveu7/29/ The class 'infinite' can be used if the animation should be repeated, otherwise will be executed only one time

I created a button to test the class toggle

 .flash-it{
      opacity: 1;
      animation-name: fadeInOpacity;
      animation-iteration-count: 1;
      animation-timing-function: ease-in;
      animation-duration: 2s;
  }

 .infinite
 {
     animation-iteration-count:infinite;
  }

 @keyframes fadeInOpacity {
       0% {
           /*opacity: 1;*/
           background-color:rgba(255,255,0,0);
       }
       50% {
           /*opacity: 0;*/
           background-color:rgba(255,255,0,255);
       }
       100% {
           /*opacity: 1;*/
           background-color:rgba(255,255,0,0);
       }
}
View Timeline