Minor hiccup in the CSS animation

While creating a CSS animation for a responsive menu icon that transforms into an "X" when clicked, I encountered a minor glitch. The top line of the menu icon flickers down by about 1px after the X shape is formed, causing it to continue moving while the other lines have stopped. Despite spending hours trying to fix this issue, I haven't been successful. Is there a solution to prevent this from happening, or perhaps a better approach to achieving the desired animation?

https://jsfiddle.net/8nj5y4t1/58/

HTML:

    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>

</span>

CSS:

.menu-button {
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
    z-index: 10;
    width: 21px;
    height: 14px;
    padding: 2px 0 2px 0;
    cursor: pointer;
    vertical-align: middle;
}

.bar {
    display: block;
    position: absolute;
    width: 21px;
    height: 2px;
    background-color:#888;
    -webkit-transition: all .8s;
    transition: all .8s;
}

.bar:nth-child(3n) {
    top: 2px;
}

.bar:nth-child(3n+1) {
    top: 8px;
    opacity:1;
}

.bar:nth-child(3n+2) {
    top: 14px;
}

.bar.open {
    background-color:#666;
}

.bar:nth-child(3n).open {
    transform: rotate(45deg);
    width: 23px;
    left: -1px;
    top: 7.5px;
}

.bar:nth-child(3n+1).open {
    opacity:0;
}

.bar:nth-child(3n+2).open {
        transform: rotate(-45deg);  
    width: 23px;
    left: -1px;
    top: 7.5px;
}

jQuery:

jQuery(document).ready(function($) {    

    $('.menu-button').click(function() {
        $('.bar').toggleClass('open');

    });

});

Answer №1

.bar:nth-child(3n+1) top property and .bar:nth-child(3n).open along with .bar:nth-child(3n+2).open top properties should have the same value;

For Instance

I adjusted top:7.5px to top:8px in both .bar:nth-child(3n).open and .bar:nth-child(3n+2).open

jQuery(document).ready(function($) {    

    $('.menu-button').click(function() {
        $('.bar').toggleClass('open');

    });

});
.menu-button {
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
    z-index: 10;
    width: 21px;
    height: 14px;
    padding: 2px 0 2px 0;
    cursor: pointer;
    vertical-align: middle;
}

.bar {
    display: block;
    position: absolute;
    width: 21px;
    height: 2px;
    background-color:#888;
    -webkit-transition: all .8s;
    transition: all .8s;
}

.bar:nth-child(3n) {
    top: 2px;
}

.bar:nth-child(3n+1) {
    top: 8px;
    opacity:1;
}

.bar:nth-child(3n+2) {
    top: 14px;
}

.bar.open {
    background-color:#666;
}

.bar:nth-child(3n).open {
    transform: rotate(45deg);
    width: 23px;
    left: -1px;
    top: 8px; /* Updated from 7.5px to 8px */
}

.bar:nth-child(3n+1).open {
    opacity:0;
}

.bar:nth-child(3n+2).open {
    transform: rotate(-45deg);  
    width: 23px;
    left: -1px;
    top: 8px; /* Updated from 7.5px to 8px */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <span class="menu-button">
  
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
  
</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the tabs to fit perfectly within the container

I am currently facing an issue with my navigation bar. I have placed the <nav> tags within a container set to 100% width. However, when I adjust the height of the container by a certain percentage, the <ul> & <li> elements in the nav ...

Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this: [blurb] (8) [form] (4) However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices. On smaller devic ...

How to Show an Image in a Search Bar Using HTML

As I put the finishing touches on this table, I decided to add a search function to it. However, I encountered an issue with the search bar design. I wanted to incorporate a search icon png file as the background image, similar to the example showcased on ...

Issue with Bootstrap 4 Grid Layout System

Recently delved into the world of Bootstrap 4 and its responsive grid system. Everything seemed to be going smoothly with my columns and resizing windows, until I encountered an issue on xs screensize where all columns automatically spanned 12 instead of ...

How to eliminate padding between Bootstrap col-xx columns

When using Bootstrap's col-xx classes, the padding can sometimes result in wasted space on smaller screens. To address this, I have decided to remove the padding by nesting col-xx with specific CSS settings like shown below: <style> div[class^= ...

Arranging CSS text in a parallel format and aligning it vertically

I am working on a layout with two columns of text placed side by side, where one column is right aligned and the other is left aligned. Below is my current code: .alignleft { float: left; } .alignright { float: right; } .list-unstyled { padding ...

Issue: Animation not triggered on exit by React-transition-group Transition

I am aiming to create a unique animation where an icon spins 90 degrees to become flat and then seamlessly transitions into another icon, simulating a coin-spin effect. The desired effect is for the icons to spin both on enter and exit, although there may ...

Move the scroll bar outside of the div and set it to automatically overflow

My issue involves a small div with the CSS property overflow:auto;. However, when the scroll bar appears, it covers up a significant portion of the div. One possible solution is to use overflow:scroll;, but this can result in an unsightly faded scroll bar ...

Errors can be thrown when using React and classNames in the class component

I'm relatively new to React and currently working on a large project. I've run into an issue where I can't use both class and className on all elements and components, particularly custom ones. To work around this, I've had to place the ...

How to create a vertical dashed line using React Native

https://i.sstatic.net/Mhbsq.png Looking for advice on implementing dotted vertical lines between icons in React Native. Any suggestions? ...

"Utilizing ng class with an array of objects: A step-by-step guide

I am facing a scenario in which my response appears as follows: "currency" : [ { "_id" : ObjectId("584aad5d3e2537613e5f4c39"), "name" : "USD" } ], I need to enable my checkbox based on the currency name. I attempted the followi ...

I want my list of cards to condense down to just two columns, and I'd like the headers to be

Creating a "table" with bootstrap cards, fetching data through $smarty. When the viewport shrinks, I want to collapse the table into 2 columns. The left column should have headers like: name, date, age. The corresponding right column should display the da ...

Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...

What is the best way to prompt users to submit comments with a popup textarea box?

Within my project, I have incorporated a dropdown list: <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject <span class="caret"></span> </but ...

Creating a responsive div section following the navigation bar using Bootstrap

Seeking advice on how to position a div region containing page content beneath a navbar without using margin-top. Currently, I have implemented margin-top:200px, but I am uncertain if this approach is responsive or if there is a better method available. T ...

Touch target for scrollbars

While developing the modal in HTML, I encountered an issue where keyboard-only users cannot access all content within the modal. I came across a note stating that the scrollbar touch target should be 44px by 44px. I tried reading this documentation https ...

How should we arrange these components to optimize the overall aesthetic of this particular design?

My current progress on the code: Visit this link Desired design for reference: View design picture here I've experimented with position relative and margins, but these techniques have impacted the responsiveness of my webpage. What is the most eff ...

Setting the width of a wizard modal to auto

I am facing an issue with my modal wizard. The width of the first modal is perfect, but when I navigate to the second and third modals by pressing next, they automatically take on a fixed width size that I need to modify. I have tried declaring the width ...

Is it possible to arrange JSON Objects vertically on a webpage using tables, flexboxes, divs, and Javascript?

Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows: https://i.sstatic.net/K ...

Implementing hover effect triggered by keyboard input

Is there a way to create a hover effect on a div when a specific key is pressed on the keyboard using jQuery? <div id="d-up" class="button"></div> Appreciate any help with this! Thank you. ...