After a slight delay, the animated element twitches into action

I am currently working on implementing a menu item behaviour in the header similar to the one found at: . On this webpage, there is a bar that slides back and forth when hovering over elements. However, I am unable to add another element to my header, so I have opted to achieve this effect using only CSS by utilizing the after pseudo-element.

You can view an example of what I have done so far here: https://jsfiddle.net/1czmx08y/

At the moment, there seems to be a noticeable delay when moving between items, and if I decrease the transition time, the animation starts to twitch.

I am seeking advice on how to prevent this unwanted behaviour. It seems like my transition settings may be incorrect.

cssanimationcss-transitionstransitionpseudo-element

Answer №1

Adjusting all the transitions to either 0.15s or 0.18s can significantly enhance the user experience. It offers a more seamless interaction with the elements on the webpage which might prove to be a superior alternative compared to resorting to additional plugins, CSS modifications, or JavaScript implementations.

html {
  font-family: 'Josefin Slab', 'Comfortaa', sans-serif;
  font-size: 1.2em;
  background: #eee;
}

ul {
  position: relative;
  width: 27em;
  height: 2em;
  margin: 100px auto;
  padding: 0;
  white-space: nowrap;
}

ul li {
  display: inline;
  text-align: center;
}

ul li a {
  position: relative;
  top: 0;
  left: 0;
  right: 25em;
  bottom: 0;
  display: inline-block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .4em .2em;
  color: #09C;
  text-decoration: none;
  text-shadow: 0 1px 0 white;

  /*transition*/
  -webkit-transition: width .3s,right .3s;
  -moz-transition: width .3s,right .3s;
  -o-transition: width .3s,right .3s;
  transition: width .19s,right .19s;
}

ul li:nth-child(1) a { width: 2em; }
ul li:nth-child(2) a { width: 4em; }
ul li:nth-child(3) a { width: 4em; }
ul li:nth-child(4) a { width: 12em; }
ul li:nth-child(5) a { width: 5em; }

ul li:last-child a::after {
  content: "";
  position: absolute;
  right: inherit;
  bottom: -3px;
  width: inherit;
  height: 3px;
  background: #ccc;
  pointer-events: none;
  /*transition*/
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .19s ease;
}

ul li:nth-child(1) ~ li:last-child a {
  right: 25em;
  width: 2em;
}

ul li:nth-child(2):hover ~ li:last-child a {
  right: 21em;
  width: 4em;
}

ul li:nth-child(3):hover ~ li:last-child a {
  right: 17em;
  width: 4em;
}

ul li:nth-child(4):hover ~ li:last-child a {
  right: 5em;
  width: 12em;
}

ul li:nth-child(5):last-child:hover a {
  right: 0;
  width: 5em;
}

ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after { background: #c351fa; }

ul li:last-child a {
  min-width: 5em;
  max-width: 5em;
}

ul li a:hover,
ul li a:focus {
  color: #c351fa;
  background-color: rgba(255,255,255,.6);

  /*transition*/
  -webkit-transition: width .3s,right .3s,background-color .3s;
  -moz-transition: width .3s,right .3s,background-color .3s;
  -o-transition: width .3s,right .3s,background-color .3s;
  transition: width .19s,right .19s,background-color .19s;
}

ul li a:focus { border-bottom: 3px solid #c351fa; }
<ul>
   <li><a href="#"> &#10047; </a></li><!--
--><li><a href="#"> Lorem </a></li><!--
--><li><a href="#"> Ipsum </a></li><!--
--><li><a href="#"> Consectetur adipisicing </a></li><!--
--><li><a href="#"> Sit amet </a></li>
 </ul>

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

Moving a div horizontally while clicking and holding on a control button with a smooth animation effect

I am currently working on a new feature inspired by a previous question I found on Stack Overflow. My goal is to make the scrolling start slowly and then gradually speed up. However, I am facing an issue with using easing in the animate function as it get ...

javascriptjqueryanimationeasingmousedown

Redefining the colors of an SVG when it is a CSS background image in code

I currently have an SVG icon encoded within my CSS file. I'm looking to change the color of this icon when a user hovers over it without creating a duplicate icon in a different color. Here's a snippet from my CSS file: background-image: url("d ...

htmlcsssvgbackground-image

How to target the DIV elements that have at least one unordered list (UL) inside using CSS selector or JavaScript

Imagine a hierarchy structured like this: <div class="first_level"> <div class="second_level_1"> <div class="third_level_1"> <div class="fourth_level_1"> <ul><li></li><li></li></ ...

htmlcsscss-selectors

Is it possible to specifically focus on Google Chrome?

Can anyone help me with positioning the update button on www.euroworker.no/order? The button works fine in Firefox and Internet Explorer, but it's not displaying correctly in Chrome or Safari. I've tried targeting Safari and Chrome specifically, ...

csssafarigoogle-chrometarget

Designing a menu header against a specific background color resulting in misalignment

I have been working on creating a menu header for my website. If you would like to take a look, here is the link to my jsfiddle page. Unfortunately, I am facing an issue where all my images and text should remain in that grey color scheme but somehow it& ...

javascriptjqueryhtmlcss

My attempt to use the Redux method for displaying data in my testing environment has not yielded

I've been attempting to showcase the data in a Redux-friendly manner. When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected. For this purpose, I implemented the ...

javascripthtmlcssreactjsredux

jQuery Mobile offers a feature that allows users to create collapsible elements

I recently ran a coding validation check at and encountered the following errors: <div data-role="collapsible-set" id="col"> <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="ui-nodisc-icon"> ...

jqueryhtmlcss

Determine the vertical dimension of a child division once it has been integrated into an HTML document

My goal is to create a website with multiple pages without having to recreate the toolbar for each page. To achieve this, I have created a separate HTML file and CSS file specifically for the toolbar. On each page, I simply import the toolbar using the fo ...

javascripthtmlcssvs-web-site-project

Resize a div within another div using overflow scroll and centering techniques

Currently, I am working on implementing a small feature but am facing difficulties with the scroll functionality. My goal is to zoom in on a specific div by scaling it using CSS: transform: scale(X,Y) The issue I am encountering lies in determining the c ...

javascriptjqueryhtmlcss

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

I encountered a strange issue while designing my website. The code I wrote for the Bootstrap card-deck class in codeply.com was working perfectly fine. However, when I copied the same code into my PyCharm code editor and then pasted the file link into my b ...

pythonhtmlcssbootstrap-4web-development-server

When the search is focused, I prefer for the expanding search box to overlay the menu section rather than pushing it aside, all without the use

I am working on a search box with a subtle animation: <input class="search" type="search" placeholder="Search"> To make it expand when focused, I used the following CSS: .search:focus { width: 225px; outline: none; } I also experimented w ...

htmlcsssearch

Description positioned along the edge of the image

Is it achievable in Bootstrap 4.1 to have the caption aligned with the image margin as displayed in the image below? Illustration of aligning caption with image Following the sample at getbootstrap.com, there exists a discrepancy between the caption and ...

csstwitter-bootstrapbootstrap-4figurecaption

The div does not allow elements to be centered

I am facing an issue where elements are not centering on my div. I have tried numerous solutions (so many that I finally decided to create a Stack Overflow account), but nothing seems to work. Interestingly, the elements center on PC but for some reason, ...

htmlcss

Is there a way to modify the background color with Bootstrap?

While following a Bootstrap tutorial, I stumbled upon an issue that I can't seem to resolve. In my layout, I have an article and a sidebar in a row, with the article taking up 9 columns and the sidebar taking up 3 columns. The background color of the ...

htmlcsstwitter-bootstrap

What is causing my nested class to be treated as a sibling rather than a child in HTML code

I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...

htmlcss

Ensuring the validity of float and non-empty values in JavaScript

Embarking on the journey of web development, I'm delving into basic applications. My current project involves creating a straightforward webpage to add two numbers and implementing preliminary validations - ensuring that the input fields are not left ...

javascripthtmlcsswebbootstrap-4

Span tag not respecting CSS width property

One of my spans is causing an issue. Here are the styles in question: .form_container .col1che { float: left; width: 4%; text-align: left; } .form_container .col2che { float: left; width: 80%; text-align:left; } .form_container .col3che { float: ...

csscss-floathtml

What steps can I take to display lines in a textarea so that it closely resembles the appearance of a notepad document

Is there a way to display lines in a text-area to give it the appearance of a notepad? I only have one text-area available. See the example notepad below for reference. ...

javascriptjqueryhtmlcss

Circular Graphical Representation using CSS3 styling

Check out my latest creation - a donut chart: http://jsfiddle.net/4azpfk3r/217/ I'm trying to customize the appearance of the donut chart. Is there a way to give it a red outline and have the filled score/percentage in solid red, while leaving a tran ...

csssvg

Customize CSS for Vimeo's HTML5 player

Can I customize Vimeo's HTML and CSS attributes? I have a video that autoplays and I don't want the play button. I want to modify this specific class. .a.l .b .as { position: absolute; top: 50%; left: 50%; margin: -2em 0 0 -3.25em; float: none; ...

jquerycsshtmlvimeo