CODEWITHSUNDEEP
cssanimation
Jack Averill
Jack Averill

Reputation: 841

Slight glitch in CSS animation

There's a very small glitch in a CSS animation I've made for a responsive menu icon that turns into an "X" when clicked. The top line of the menu icon flickers down about 1px once the X shape has been made, so it is effectively still moving once the others have stopped. I've been messing around with it for hours but haven't been able to stop it happening – can anyone think of a way in which I could do this, or even a better way of achieving that 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');

    });

});

Upvotes: 0

Views: 80

Answers (1)

KanUXD
KanUXD

Reputation: 707

.bar:nth-child(3n+1) top property and .bar:nth-child(3n).open and .bar:nth-child(3n+2).open top properties should be off same value;

Example

I replaced top:7.5px with top:8px at .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; /* Changed this 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; /* Changed this 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>

Upvotes: 2

Related Questions