CSS3 transitions, using translateX + translateY set to positive values, do not appear to transition properly - css

Question

I'm currently trying to implement some CSS transition effects on a set of different panels, to give the appearance that they are "sliding in" from off screen. I want them each to appear in a different direction (e.g. top to bottom, left to right, etc.)
Presumably, to do bottom to top and right to left, I would just want to set translateX or translateY, but with a positive value, rather than negative. And then for all of them, I would just translate the value to 0 when I want them to appear on screen.
Here is a really simplified version of what I am trying to do:
HTML:
<div class="container">
<div id="about" class="panel">
<h2>About</h2>
<p>I'm Mike and I don't know!</p>
Close
</div>
<div id="projects" class="panel">
<h2>Projects</h2>
<p>Here are some projects I have worked on.</p>
Close
</div>
<div id="contact" class="panel">
<h2>Contact</h2>
<p>You can find me all over the Internet!</p>
Close
</div>
<div id="blog" class="panel">
<h2>Blog</h2>
<p>Here are some blog posts.</p>
Close
</div>
projects
blog
about
contact
</div>
CSS:
.container {
overflow:hidden;
position:relative;
width:100vw;
height:100vh;
}
.panel{
min-width: 100%;
height: 100%;
position: absolute;
box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
z-index: 2;
-webkit-transition: transform .8s ease-in-out;
-moz-transition: transform .8s ease-in-out;
-o-transition: transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.panel:target {
-webkit-transition: transform .8s ease-in-out;
-moz-transition: transform .8s ease-in-out;
-o-transition: transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.panel#contact {
transform: translateX(110%);
background-color:whitesmoke;
}
.panel#about {
transform: translateX(-110%);
background-color: red;
}
.panel#projects {
transform: translateY(110%);
background-color: blue;
}
.panel#blog {
transform: translateY(-110%);
background-color: gold;
}
.panel#contact:target{
transform: translateX(0%);
}
.panel#about:target{
transform: translateX(0%);
}
.panel#projects:target{
transform: translateY(0%);
}
.panel#blog:target{
transform: translateY(0%);
}
Note that the "About" and "Blog" links are transitioning as expected, whereas the "Projects" and "Contact" links appear to cause weirdness. Those are the two with positive values.
I'm having a really difficult time:
a.) understanding what the problem is exactly
b.) how can I fix it (if at all)
If someone could both explain what the browser is doing right now with those erroneous transitions and provide a solution, I would be much obliged. AFAIK, this is happening in every browser (that supports the :target pseudo element, anyway).
Let me know if you need clarification. Thanks a lot!
UPDATE: Not fixed, but I noticed that if you set the values to <98% for the offending element panels (Projects + Contact), the page transitions properly, though it isn't hidden from the screen. Not sure what that means, but if it helps...
UPDATE 2.0: Thanks for the comments, folks! I tried adding a container, and have updated the HTML and CSS to reflect that. The changes in question are a container div that wraps the panels, as well as the following CSS for that container:
.container {
overflow:hidden;
position:relative;
width:100vw;
height:100vh;
}
I'm still having similar behavior -- this is also updated in the Codepen. I think I understand now the issue, but I'm not quite sure why the page is still jumping to that element in question before applying the transformation. I can imagine there is some hacky way to get around this, but I would rather do it the "right" way.

Answer 1

I decided that using :target and trying to have this be pure CSS wasn't really the way to go, and wound up just using Javascript in a fairly straightforward manner.
Lesson learned: Don't try to do things w/ Pure CSS unless you really have to.