Identical CSS (keyframe) animation for twin navigation items behaving unexpectedly

HTML-CSS
1

I wonder if someone can assist me with a CSS animation issue (bug?) that I’ve been puzzling over for the past week but am unable to solve.

Basically, I’m working on a secondary sub-navigation system for a responsive website. On smaller screens (mobile first) the navigation items appear as conventional circular touch targets. When the viewport/breakpoint is wider than 1024px the navigation items reshape as fixed bars at the left and right sides of the viewport. I have the entire navigation styled and functioning as required with HTML/CSS only (see below). No issues whatsoever and works cross browser.

However, I wanted to make things a little more visually appealing by adding some very simple CSS animation. When the aforementioned CSS animations are added, the fixed bars nav items now scroll smoothly into place, from left and right respectively when the viewport is greater than 1024px. Again, no issues …and I personally think it looks lovely! :slight_smile:

However, I’m experiencing unexpected behaviour with the fixed right hand side nav item. This is noticeable when the browser window is manually resized.

When the page is opened (on viewports wider than 1024px) both fixed bar nav items slide smoothly in from left and right as expected. However, if the viewport is resized to under 1024px and dragged back over 1024px you can see that while the left hand side nav item slides in smoothly (as expected) the right hand side nav item is just suddenly appears.

Also, when the viewport is under 1024px to show the circular touch target nav items and the page is refreshed, the left hand side nav item stays fixed (as expected), however the right hand side nav item slides in stupidly from the right hand side.

I’ve tweaked the CSS in myriad ways but can’t seem to rectify this issue. I also appreciate that the average site visitor will never actually notice this quirk due to the fact they are unlikely to be resizing their browser window as I am! However, it’s seriously bugging me and I’d like to learn what’s causing the issue. Is it how my CSS is written or is it some quirk of CSS/animation?

I’ve included the CSS/HTML below and hoping someone can point me in the right direction. I basically want both left and right hand side nav items to behave in exactly the same way regardless of viewport size or page refreshes. The functional asymmetry of this is seriously getting to me! :wink:

Thank you.

<!doctype html>
<html lang="">
<head>
  		<meta charset="utf-8">
  		<meta name="viewport" content="width=device-width,initial-scale=1.0">
  		<title>Side nav test</title>
<style>

@charset "UTF-8";

a {text-decoration: none;}

.wrap {
  box-sizing: content-box;
  margin: 0 auto;
  padding-left: .75rem;
  padding-right: .75rem;
  max-width: 36rem;
}

/* <----------Problem area start? */

.pagination-item {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: red;
  color: #fff;
  border-bottom: 0;
}

.pagination-item:hover, .pagination-item:focus {background: #000;}

.pagination-item.left {
  float: left;
  display: grid;
}

.pagination-item.right {
  float: right;
  display: grid;
}

.pagination-label svg {
  position: relative;
  top: 50%;
  display: block;
  margin: -6px auto 0;
  width: 24px;
  height: 12px;
}

.pagination-label-text {display: none;}


@media all and (min-width: 1024px) {
  .pagination-item {
    position: fixed;
    width: 1.75rem;
    height: 100%;
    top: 0;
    border-radius: 0;
  }

    .pagination-label {
    display: block;
    height: 100%;
    width: 1.4rem;
    font-size: 0.75rem;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: bold;
    writing-mode: tb-rl;
    text-align: center;
  }

    .pagination-label-text {display: inline;}

    .pagination-item svg {
    display: inline;
    position: static;
  }

    .pagination-item.left {
    left: 0rem;
    left: -200px;
    -webkit-animation: slide-left 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide-left 0.5s forwards;
    animation-delay: 0.3s;}
  @-webkit-keyframes slide-left {100% { left: 0; }}
  @keyframes slide-left {100% { left: 0; }}
  }

    .pagination-item.right {
    right: 0rem;
    right: -200px;
    -webkit-animation: slide-right 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide-right 0.5s forwards;
    animation-delay: 0.3s;}
  @-webkit-keyframes slide-right {100% { right: 0; }}
  @keyframes slide-right {100% { right: 0; }}
  }
}

/* <----------Problem area stop? */

@media all and (pointer: coarse) {}

html {font: normal 400 1.5em/1.5 Georgia, serif;}

</style>
</head>

<body>

<main class="main" role="main">
    
    <header class="wrap">
      	<h1>Side nav test</h1>
    
    </header>
    
    <div class="text wrap">
    
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
 <br>   
    </div>
    	<nav class="pagination 1 wrap">

          <a class="pagination-item left" href="#" rel="prev" title="A">
        <span class="pagination-label"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(0.0231772,0,0,0.0231772,1.56664,0.066656)">
        <path d="M201.373,73.373L41.373,233.373C28.876,245.869 28.876,266.131 41.373,278.627L201.373,438.627C213.87,451.123 234.131,451.123 246.628,438.627C259.126,426.131 259.126,405.869 246.628,393.373L141.254,288L836.313,288C853.986,288 868.313,273.674 868.313,256C868.313,238.327 853.986,224 836.313,224L141.254,224L246.627,118.627C252.875,112.379 256,104.189 256,96C256,87.811 252.876,79.621 246.628,73.373C234.13,60.876 213.87,60.876 201.373,73.373Z" style="fill-rule:nonzero;"/>
    </g>
</svg>
<span class="pagination-label-text">This way</span></span></a>
    
          <a class="pagination-item right" href="#" rel="next" title="B">
        <span class="pagination-label"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(0.0231771,0,0,0.0231771,10.5667,0.0666657)">
        <path d="M310.627,438.627L470.627,278.627C483.124,266.131 483.124,245.869 470.627,233.372L310.627,73.372C298.13,60.876 277.869,60.876 265.372,73.372C252.875,85.869 252.875,106.13 265.372,118.627L370.745,224L-324.314,224C-341.987,224 -356.314,238.327 -356.314,256C-356.314,273.673 -341.987,288 -324.314,288L370.745,288L265.372,393.373C259.124,399.621 256,407.811 256,416C256,424.189 259.124,432.379 265.372,438.627C277.869,451.124 298.13,451.124 310.627,438.627Z" style="fill-rule:nonzero;"/>
    </g>
</svg>
<span class="pagination-label-text">That way</span></span></a>
    
 		</nav>
</main>
</body>
</html>
2

I noticed there’s an extra closing brace after animation-delay: 0.3s; in both .pagination-item.left and .pagination-item.right class definitions. Removing that brace seems to keep the right circular touch target static.

However, I noticed this change stops slide animation on viewports wider than 1024px and the bars simply appear.

In the same class definitions I noticed that you’ve assigned values for left and right twice. The previous assignment of 0rem gets overridden in this case.

Perhaps some further tweaking is required to render animations? I hope this helps and I haven’t misunderstood your code. Let me know!

1 Like
3

Hello,

First, thank you so much for taking the time to look at my (messy!) code. It’s nice to have another pair of sharp eyes looking at my efforts… and noticing some issues that I didn’t! :slight_smile:

Removing both of the superflous closing braces and the duplicate values you suggested has fixed the issue! Circular touch targets now appear on smaller viewports and are locked in place. Slide on animations work flawlessly (and identically) at left and right sides in wider viewports.

I still have some minor adjustments to make to the code but your suggestions have solved the issue completely. :grinning:

I’ve spent a week trying to solve this and you’ve helped me to fix the issue in seconds! I really can’t thank you enough for your valuable knowledge and help. I really appreciate it.

Thank you so much! :smiley:

L

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.