Is there a way to create a responsive animation with CSS using VW units without compromising the quality of the animation?
Seeking assistance from knowledgeable individuals in this matter.
HTML:
<div class="slidebar" id="slide" >
<div class="hamburger" id="hamburger-1" onclick="hamburger()">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
CSS:
.slidebar{
position: absolute;
top: 17px;
right: 25px;
z-index: 100;
transition: 0.4s ease-in-out;
}
.hamburger .line{
width: 50px;
height: 5px;
background-color: black;
display: block;
margin: 8px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#hamburger-1.is-active .line:nth-child(2){
opacity: 0;
}
.hamburger:hover{
cursor: pointer;
}
#hamburger-1.is-active .line:nth-child(2){
opacity: 0;
}
#hamburger-1.is-active .line:nth-child(1){
-webkit-transform: translateY(13px) rotate(45deg);
-ms-transform: translateY(13px) rotate(45deg);
-o-transform: translateY(13px) rotate(45deg);
transform: translateY(13px) rotate(45deg);
}
#hamburger-1.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px) rotate(-45deg);
-ms-transform: translateY(-13px) rotate(-45deg);
-o-transform: translateY(-13px) rotate(-45deg);
transform: translateY(-13px) rotate(-45deg);
}
JS:
function hamburger(){
var hamburg = document.getElementById('hamburger-1');
hamburg.classList.toggle("is-active");
var slidebar = document.getElementById("slide");
slidebar.classList.toggle("is-active");
}
A JSFiddle has been created for easy access: JSFiddle
Looking for solutions using only JS, CSS, and HTML.