I am encountering an issue with a text element that is rotated -90 degrees and needs to translate left and right upon user interaction. However, I have noticed that the element wobbles while moving, specifically in Chrome. Any tips on how to make the animation smoother?
$(document).ready(function() {
$('.toggle').click(function() {
$(this).toggleClass('in').toggleClass('out');
});
});.toggle {
width: 100px;
height: 30px;
background-color: blue;
color: white;
text-align: center;
padding-top: 10px;
font-size: 25px;
transform: rotateZ(-90deg);
position: absolute;
top: 30px;
transition: all 1s ease;
}
.toggle.in {
margin-left: -38px
}
.toggle.out {
margin-left: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='toggle in'>
Click me
</div>Looking for suggestions on improving the smoothness of this animation.