Я работаю над анимацией меню гамбургера, где меню при щелчке превращается в две формы: треугольник и шеврон справа от него.
У меня есть некоторые проблемы со сглаживанием анимации. Использую border-color
, чтобы выполнить то, что хочу, но при двойном щелчке (= «обратная» анимация) реализуется не так гладко, как стартовая анимация.
HTML и CSS:
body {
background-color: #252626;
}
div {
width: 200px;
margin: 100px;
div {
height: 50px;
margin: 30px 0;
position: relative;
top: 0;
left: 0;
bottom: 0;
transition: all .3s ease-in-out;
}
}
.one, .three {
background-color: #DFBA68;
height: 12px;
}
.one-clicked, .three-clicked {
position: relative;
left: 50px;
border-radius: 12px;
}
.one-clicked {
transform: rotate(33deg) scale(.93, 1);
top: 90px;
}
.two {
width: 0;
height: 0;
border-top: 25px solid #F7F4EA;
border-left: 200px solid #F7F4EA;
border-bottom: 25px solid #F7F4EA;
transition: all .3s ease-in-out, border-color .1ms ease-in-out .2s;
}
.two-clicked{
width: 0;
height: 0;
border-top: 100px solid transparent;
border-left: 150px solid #F7F4EA;
border-bottom: 100px solid transparent;
transition: all .3s ease-in-out, border-color .1ms ease-in-out;
}
.three-clicked{
transform: rotate(-33deg) scale(.93, 1);
top: -87px;
}
<div class="button">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Может ли кто-нибудь помочь мне, сгладить эту полную анимацию для меня?
Свободный перевод вопроса Hamburger menu animation от участника @Pieter VDE.