I have made a full page overlay menu that is displayed when click on the custom made icon. Its working fine on Android devices and in chrome inspector it works fine for all devices but when I test it on actual iPhone device menu doesn't appear.
Here is the screenshot of the icon before clicking it display like this :
When we click on it, display menu like this:
This menu is opened on iPhone x in chrome responsive tool but when I open it on actual iPhone device it didn't open.
I have tried a fix of adding onclick=void(0) like this
HTML Code
<div id="nav-icon2" onclick = "void(0)">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS:
#nav-icon2 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon2 span {
display: block;
position: absolute;
height: 9px;
width: 50%;
background: #d3531a;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon2 span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
#nav-icon2 span:nth-child(odd) {
left:0px;
border-radius: 9px 0 0 9px;
}
#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
top: 0px;
}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
top: 18px;
}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
top: 36px;
}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon2.open span:nth-child(1) {
left: 5px;
top: 7px;
}
#nav-icon2.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
#nav-icon2.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
#nav-icon2.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
#nav-icon2.open span:nth-child(5) {
left: 5px;
top: 29px;
}
#nav-icon2.open span:nth-child(6) {
left: calc(50% - 5px);
top: 29px;
}
JS:
$ = jQuery.noConflict();
$(document).ready(function(){
$('#nav-icon2').click(function(){
$(this).toggleClass('open');
});
});
But it didn't work for me. Here is my code for custom hamburger icon
Demo
Please, help me what's the problem I'll be very thankful to you.
I have a tricky problem which I have been unable to solve.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100% -ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 3%;
height: 4%;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
https://jsfiddle.net/6t04y9wo/6/
As you can see, the top-left navigation button is shown differently between Chrome and IE.
I tried to get everything work in percent units to avoid incompatibility with 4k monitors (or very different resolutions) or zooming (which is really hard to avoid on a touchscreen-monitor+ windows).
As far as I can see, the height of the buttonelement is measured really differently, and so the inner heights will be. I've tried many different settings for that, but I can't get it work and look good for both Chrome and Internet Explorer.
It seems that the margin here:
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
Is not correct, but I don't know how to fix it.
Maybe there is someone with some useful hints?
This would appear to be due to IE not calculating the height of the button correctly.
When using position: fixed; the position and dimensions of the element should be calculated in relation to the initial containing block:
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.
Fixed positioning (https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning)
It appears that IE is sizing the button in relation to the body. As you are using percentage height and no height has been specified on body this will result in the height for the button being set as auto. This can be overcome by adding height: 100%; to body so that the button's height can be calculated in relation to it.
The height of the bars in the button is set to 50% which with the padding will mean they exceed the height of the button. To overcome this you should set overflow: visible; on the button to allow them to be visible.
There is also a small typo that you will want to fix:
height: 100% -ms-content-zooming: none;
Should be:
height: 100%;
-ms-content-zooming: none;
You may also want to set a min-height and min-width to ensure the button shows when the viewport height is very small.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100%;
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
height: 100%;
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
overflow: visible;
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 3%;
height: 4%;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
min-height: 20px;
min-width: 50px;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
Alternatively, you could use viewport units to specify the dimensions of the button.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100%;
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
overflow: visible;
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 4vh;
height: 4vh;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
min-height: 20px;
min-width: 50px;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
Just use pixels, 4k displays are scaled, my uhd notebook shows exactly the same page when I'm looking at a page with a 1200px width body.
I want to make it so that I can have multiple buttons opening their own transition. As of now I have this code which works fine, however, if I repeat it or even change the css (class) to match an individual button, the primary button will still open the secondary transition and the newly placed secondary button remains inactive.
CSS
<style>
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #fff;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: absolute;
background: #fff;
overflow-y: visible;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: none;
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button 1 */
.menu-button {
position: absolute;
z-index: 1000;
margin: 1em;
padding: 0;
width: 10px;
height: 50px;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
opacity: 1;
top: 510px;
left: 855px;
-ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.2em;
bottom: 0.4em;
left: -1px;
background: linear-gradient(#929292 20%, transparent 20%, transparent 40%, #929292 40%, #929292 58%, transparent 0%, transparent 80%, #929292 80%);
content: '';
}
.menu-button:hover {
opacity: 1;
}
/* Close Button */
.close-button {
width: 50px;
height: 50px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
opacity: 0;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Comments */
.menu-wrap {
position: absolute;
z-index: 1000;
width: 429.0500011444092px;
height: 600.875px;
right: 0;
background: #0C0C0C;
top: 6px;
padding: 0;
font-size: 1.15em;
-webkit-transform: translate3d(500px,0,0);
transform: translate3d(500px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}</style>
BEING TRANSITIONED
<div class="menu-wrap">
</div>
BUTTON
<button class="menu-button" id="open-button">Open Menu</button>
DEMO
DEMO
As you can see if you scroll towards the middle of the demo result window you will see the first button opening both transitions while the second button does nothing, I want the second button to open the bottom transition on its own.
Currently i am creating a website and i want to use the "new" css3 animations. It is hard to described what i've done, so i made a small example with the problem. When you hover with the mouse over the block the animation in firefox is very ugly. Furthermore the background image jitters 1px. The font gets blurry and the logo too. In IE11, Chrome its all working very fine :)
Here is the link: https://jsfiddle.net/0gk3fhnv/ or full code:
<ul id="parallelogram-box">
<li class="parallelogram">
<div class="text">Very nice descr Text! And here sec Row...</div>
<div class="logo"></div>
</li>
</ul>
.
body {
background: #eee;
}
#parallelogram-box {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-align: center;
}
#parallelogram-box li {
text-align: left;
position: relative;
list-style-type: none;
display: inline-block;
min-height: 400px;
min-width: 200px;
max-width: 200px;
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
margin: 20px;
overflow: hidden;
border-radius: 5%;
backface-visibility: hidden;
}
#parallelogram-box li:hover .text {
bottom: 0px;
transition: bottom 0.2s ease-in 0s;
-webkit-transition: bottom 0.2s ease-in 0s;
-moz-transition: bottom 0.2s ease-in 0s;
-o-transition: bottom 0.2s ease-in 0s;
}
#parallelogram-box li:hover {
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
}
#parallelogram-box li:before {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
li.parallelogram:before {
background: url(http://i65.photobucket.com/albums/h235/Ignwar/Album%20Mountains/AlaskanMonoliths.jpg);
background-position: -1000px -200px;
}
#parallelogram-box p {
font-size: 20px;
text-align: center;
}
#parallelogram-box li > * {
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
.text {
background: rgba(36,36,36,.9);
color: #e9e9e9;
position: absolute;
bottom: -75px;
height: 100px;
width: 180px;
z-index: 1;
font-size: 14pt;
margin-left: -12px;
text-align: center;
padding: 10px 25px 10px 25px;
transition: bottom 0.1s ease-in 0s;
-webkit-transition: bottom 0.1s ease-in 0s;
-moz-transition: bottom 0.1s ease-in 0s;
-o-transition: bottom 0.1s ease-in 0s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.logo {
position: absolute;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
}
.parallelogram .logo {
background: url(http://www.findthatlogo.com/wp-content/uploads/2011/10/dallas-mavericks-logo.png) no-repeat;
background-size: contain;
background-position: 50% 50%;
}
Can you please tell me, whats causing this strange behavior? Is there a work around?
I've found a solution!
Look at https://jsfiddle.net/0gk3fhnv/5/
#-moz-document url-prefix() {
#parallelogram-box li:after {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: none !important;
}
li.parallelogram:after {
background-image: url(for_firefox_skewed_picure.png);
}
}
I changed the transition duration for firefox to 0.01 seconds and a linear animation to obscure the blurry text. Furthermore i added the css code above, which adds a exception for Firefox. The code removes the skew of the background image. So you have to add a custom background image for Firefox and skew it for your % in Photoshop or another photo editing software.
I have a basic CSS transition where I rotate a pseudo ::after element and increase its width on hover. However the element transition is choppy and skips most of the animation halfway through.
Issue reproduced in a Code Pen.
I've tried using -webkit-backface-visibility: hidden; to solve the issue but I cant seem to stop the transition flash. Any ideas?
Transition css:
a {
position: relative;
text-decoration: none;
color: #db421c;
-webkit-box-shadow: inset 0px 4px 0px #fff;
-moz-box-shadow: inset 0px 4px 0px #fff;
-o-box-shadow: inset 0px 4px 0px #fff;
box-shadow: inset 0px 4px 0px #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a + a {
margin-left: 20px;
}
a::after{
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg) translate(55%, 10%);
-moz-transform: rotate(90deg) translate(55%, 10%);
-o-transform: rotate(90deg) translate(55%, 10%);
transform: rotate(90deg) translate(55%, 10%);
webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:last-child::after {
content: none;
}
a:hover {
color: black;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg) translate(100%, -20px);
-moz-transform: rotate(180deg) translate(100%, -20px);
-o-transform: rotate(180deg) translate(100%, -20px);
transform: rotate(180deg) translate(100%, -20px);
}
I isolated the issue to the translate transformation; I wasn't sure how exactly to fix it, although I have a feeling the solution is in the transform-origin property. The only working solution I was able to come up with was to use positioning in order to move the pseudo elements. The same rotation is being used, we are just making use of the absolute positioning in order to translate the elements. This method doesn't have any apparent issues given that the parent element is relatively positioned. This method should also work for elements with varying widths.
UPDATED EXAMPLE HERE - it achives the exact same effect without the choppiness.
Instead of translate(55%, 10%), use top: 10px/right: -22px
And instead of translate(100%, -20px), use top: 22px/right: 0px
Updated CSS
a::after {
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
top: 10px;
right: -22px;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
top: 22px;
right: 0px;
}