Posts

Showing posts with the label css-transitions

CSS Transitions: How to 'flash' in and out of a class

CSS Transitions: How to 'flash' in and out of a class I'm trying to make an element change instantly to a colour when I add a class, then slowly fade out when it's removed. I've achieved this with CSS transitions, like so: .base { background-color: #000000; transition: 1.5s background-color; } .base.extra { transition: 0s background-color; background-color: #00ff00; } This works, BUT only if I add the 'extra' class and then remove it as a separate action... $('#add').on( 'click', function(e) { e.preventDefault(); $('.base').addClass('extra'); } ) $('#remove').on( 'click', function(e) { e.preventDefault(); $('.base').removeClass('extra'); } ) $('#flash').on( 'click', function(e) { e.preventDefault(); $('.base').addClass('extra'); $('.base').removeClass('extra'); } ) .base { width:300px; heigh...