Run a chain animation on different selectors by clicking once on a button

Question

I am trying to run 2 CSS3 animations by clicking on a button. The first animation makes the button rotate and disappear and the second animation changes a second button,and makes it appear(opacity changed from 0.5 to 1) and changes its height.

The problem is that only the first animation runs. The first animation name is

q1leave

and the second animation name is

q2show

. To run the first animation i use #btnq1:target on CSS and to run the second animation i use #btnq1:target #btnq2a

See below my code:

HTML code

<div id="q1">
    <div class="q1once">
        <a href="#btnq1"><button type="button" name="" value="" id="btnq1">Click to disappear and then change a different element </button></a>
    </div>
</div>

<button type="button" name="" value="" id="btnq2a">Must change</button>

CSS code

#q1 {
    height:100%;
}
.q1once {
    width:20%;
    height:15%;
    position:absolute;
    left:-50%;
    animation-name:q1;
    animation-delay:3s;
    animation-iteration-count:1;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
#btnq1:target {
    animation-name:q1leave;
    animation-iteration-count:1;
    animation-duration:4s;
    animation-fill-mode:forwards;
}
#btnq1:target #btnq2a {
    animation-name:q2show;
    animation-iteration-count:1;
    animation-delay:4s;
    animation-duration:4s;
    animation-fill-mode:forwards;
}
@keyframes q1 {
    50% {
        transform:translate(440%) scaleX(3);
    }
    100% {
        transform:translate(450%) scale(1.5, 2);
    }
}
@keyframes q1leave {
    0% {
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        opacity:0;
        transform:rotate(360deg);
    }
}
@keyframes q2show {
    100% {
        opacity:1;
        height:200px;
    }
}
#btnq2a {
    opacity:0.5;
}

You can my jsfiddle as well. I would like to solve it using only CSS3, but i will accept other solutions using JS, jquery or other. What am i doing wrong?

Answer 1

Easiest way would be to use JavaScript to add a class to the second target whenever the first one is clicked.

var btn1 = document.getElementById('btnq1');
var btn2 = document.getElementById('btnq2a');
btn1.addEventListener('click', makeActive);

function makeActive(){
    var className = ' ' + btn2.className + ' ';
    // from SO Question #14615712
    if ( ~className.indexOf(' active ') ) {
        btn2.className = className.replace(' active ', ' ');
    } else {
        btn2.className += ' active ';
    }              
}

Or jQuery if you prefer:

$('#btnq1').on('click', function () {
    $('#btnq2a').toggleClass('active');
});

Then, adjust your CSS selector a bit.

#btnq2a.active {
    animation-name:q2show;
    animation-iteration-count:1;
    animation-delay:4s;
    animation-duration:4s;
    animation-fill-mode:forwards;
}

Here's an updated FIDDLE