CODEWITHSUNDEEP
csscss-transitions
floede
floede

Reputation: 13

Can I "invert" a CSS transition?

Here's what I would like to do:

It's a quiz, there's a question and several answers. The user picks 1 answer and is then shown what the correct answer is.

I would like that the correct answer button "lights up" basically, and then fades back to normal.

So I can give my element a simple style and then add a class with a white box shadow. And I can transition between the two.

But I'd like to add the class, and then the element gets the full white box shadow, which then fades back to the normal state.

Is that possible?

Upvotes: 0

Views: 1928

Answers (3)

Neel Basu
Neel Basu

Reputation: 12904

You need to use @keyframes to do it in pure CSS3

@keyframes animation_name{
  0%   {background: color1;}
  50%  {background: color2;}
  100% {background: color1;}
}

and for the element where you want the animation

css_selector{
   animation: animation_name 5s;
   animation-iteration-count:infinite;
}

and dont forget to add browser specific -moz, -webkit prefix.

Check out this Example on w3schools on CSS3 Animation

Upvotes: 1

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

Here is a jsfiddle for you. Should do what you need - just click the black rectangle.

Upvotes: 0

joe.smack
joe.smack

Reputation: 81

javascript apply class to element (no jquery):

document.getElementById("id").className = "newclass";

Upvotes: 0

Related Questions