Cumulating Animation with CSS - html

Question

I'm trying to make a kind of animated website only using CSS Animations with the :target selector
I made up my first cascade and then the main problem is encountered :
I can't animate anymore. Maybe because I am not sure of every lines of the code I am using, that is why I am coming to you.
Basically the effect is actually working on the 2nd link only.
Here is a small piece of my code:
.saq {
width: 110px;
height: 110px;
color: yellow;
margin-left: 815px;
border: 1px black solid;
margin-top: -550px;
transition: 4s ease-in-out;
position: absolute
}
.qaq {
width: 60px;
height: 110px;
margin-left: 1205px;
margin-top: -550px;
transition: 5s ease-in-out;
position: absolute;
display: inline;
cursor: auto;
background-color: black;
z-index: 1000
}
a {
font-size: 100px;
text-align: right
}
;
.navi {
margin-left: 400px;
transform: translate(300px, 200px);
}
nav a {
background-color: yellow;
display: inline-block
}
nav a:hover {
background-color: brown;
color: yellow;
}
#s1:target {
display: block;
transition: all 4s ease;
transform: translate(300px, 350px) rotate(90deg) scale(0.6);
overflow: hidden;
overflow-y: hidden
}
#move #s1:target~.saq {
transform: translateY(-1720px)
}
#move #s1:target~.qaq {
transform: translateY(-1720px)
}
<div id=move>
<nav class=navi id=s1>
<ul>Home</ul>
<ul>Creations</ul>
<ul>About</ul>
<ul>Contact</ul>
</nav>
<div class="qaq"></div>
<div class="saq"></div>
Here is the link of the page : http://faxe-kondi.16mb.com/bru.html
Here what I have done so far, is a lot of div moving after the #s1 is targeted.
What i am looking to do : Making a lot of div move after the #s3 is targeted.
Maybe it is a selector problem, or children/sibling, or maybe I cannot use two animation on the same div.
But of course there is a solution you can bring to me.

Answer 1

The :target selector works alright in your code. But you only use it for the #s1:target rule. Which in your HTML is only the second link.
For example:
.links>a {
display: inline-block;
width: 50px;
height: 50px;
}
.link1 {
background: red;
}
.link2 {
background: blue;
}
.link3 {
background: green;
}
.animated-box {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50px;
transition: border-radius 1s;
}
.animated-box:target {
border-radius: 0;
}
#box1 {
background: red;
}
#box2 {
background: blue;
}
#box3 {
background: green;
}
<div class="links">
<a class="link1" href="#box1"></a>
<a class="link2" href="#box2"></a>
<a class="link3" href="#box3"></a>
</div>
<div class="animated-box" id="box1"></div>
<div class="animated-box" id="box2"></div>
<div class="animated-box" id="box3"></div>
See, the difference here is how you apply the transition-effect (border-radius: 0). If you want to target only one element you can go with a selector like #s1:target but it then will only happen in case the element with id="s1" gets the target (meaning, the link with href="#s1" gets clicked).
You either want to specify more CSS rules like you did with #s1:target or you want to use a class instead like I did below.

Answer 2

can you test it?
<div id=move>
<nav class=navi id=s1>
<ul>Home</ul>
<ul>Creations</ul>
<ul>About</ul>
<ul>Contact</ul>
</nav>
<div class="qaq"></div>
<div class="saq"></div>
</div>