In the following example I have 3 divs they need to be animated using CSS3 Keyframe Animation with the following rules (when I mention hidden/show in the text below actually use opacity 0.1/1 in the CSS):

A) When the page load

* ladyDefault is shown
* ladyCorrect is hidden
* ladyWrong is hidden

B) When User click btnCorrect

* ladyDefault is hidden
* ladyCorrect is shown
* ladyWrong is hidden

C) When User click btnWrong

* ladyDefault is hidden
* ladyCorrect is hidden
* ladyWrong is shown

Currently:

* Sequence case A) and B) work fine.
* Sequence case A) and C) work fine.

But I am not able to fix the following cases:

* Sequence case A) and B) and C) does not work(ladyWrong is not shown).
* Sequence case A) and C) and B) does not work (ladyCorrect is not shown).

I would like to know how to fix it possibly using only CSS 3.

Test the following example using only Google Chrome.

```js
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');

btnCorrect.addEventListener('click', function(event) {
    ladyDefault.classList.add('hideLadyDefault');
    ladyWrong.classList.add('hideLadyWrong');
    ladyCorrect.classList.add('showLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
    ladyDefault.classList.add('hideLadyDefault');
    ladyCorrect.classList.add('hideLadyCorrect');
    ladyWrong.classList.add('showLadyWrong');
});
```

```css
#ladyDefault,
#ladyCorrect,
#ladyWrong {
    width: 100px;
    height: 150px;
    display: inline-block;
    margin: 5px;
}

#ladyDefault {
    background-color: blue;
}

#ladyCorrect {
    background-color: green;
    opacity: 0.1;
}

#ladyWrong {
    background-color: red;
    opacity: 0.1;
}

#btnCorrect,
#btnWrong {
    height: 50px;
    width: 100px;
    display: inline-block;
    margin: 5px;
}

#btnCorrect {
    background-color: lime;
}

#btnWrong {
    background-color: darkred;
}
/*
--------------------------- lady default
*/
@keyframes hideLadyDefault {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

.hideLadyDefault {
    animation-name: hideLadyDefault;
    animation-duration: 0;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-delay: 0;
}
/*
--------------------------- lady correct
*/
@keyframes showLadyCorrect {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.showLadyCorrect {
    animation-name: showLadyCorrect;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-delay: 0;
}

@keyframes hideLadyCorrect {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

.hideLadyCorrect {
    animation-name: hideLadyCorrect;
    animation-duration: 0;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both
    animation-delay: 0;
}
/*
--------------------------- lady wrong
*/
@keyframes showLadyWrong {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.showLadyWrong {
    animation-name: showLadyWrong;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-delay: 0;
}

@keyframes hideLadyWrong {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

.hideLadyWrong {
    animation-name: hideLadyWrong;
    animation-duration: 0;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-delay: 0;
}
```

```html
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>

<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
```