CSS transformation on out - css

Question

I need a help I am trying to achieve animation on hamburger menu checked and unchecked. I am able to animate menu but I can not figure out how to animate left menu animation on transform to 0
&__menu {
transform: translateX(-100%);
transition: 1s ease-in-out;
// .c-hamburger--icon ~ &{
// transition: all 300ms;
// }
.c-hamburger--icon:checked ~ &{
height: 100vh;
background: #000;
width: 270px;
transform: translateX(0);
top: 0;
opacity: .7;
position: fixed;
}
}
Here is the CodePen Demo.

Answer 1

Apply the height and width properties to the default state of the element instead of applying it only after the menu is checked. Default values for height and width properties is auto and we cannot transition from or to auto. Thus it was resulting in an immediate hiding of the menu instead of a slow transition.
As you are using a transform: translateX(-100%) to hide the menu initially, even setting a default height and width to the element will not affect the layout. Demo with the compiled CSS is added below.
&__menu {
position: fixed;
top: 0;
height: 100vh;
width: 270px;
transform: translateX(-100%);
transition: 1s ease-in-out;
.c-hamburger--icon:checked ~ &{
background: #000;
transform: translateX(0);
opacity: .7;
}
}
Another thing to note is that the position property should also be set on the default state itself. This is needed because the position is not a transitionable property.
#import url("https://fonts.googleapis.com/css?family=Titillium+Web");
* {
padding: 0;
margin: 0;
font-size: medium;
font-family: 'Titillium Web', sans-serif;
}
.l-app__menu {
position: fixed;
top: 0;
height: 100vh;
width: 270px;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.c-hamburger--icon:checked ~ .l-app__menu {
transform: translateX(0);
background: #000;
opacity: .7;
}
.l-app__left {
float: left;
position: fixed;
background: #185a9d;
width: 50%;
height: 100%;
overflow: hidden;
}
#media (max-width: 1200px) {
.l-app__left {
position: static;
width: 100%;
height: 100vh;
background: #fff;
}
}
.l-app__right {
float: right;
background: #fff;
width: 50%;
height: 100vh;
}
#media (max-width: 1200px) {
.l-app__right {
position: static;
width: 100%;
background: #bfbfbf;
}
}
.l-app__right--inner {
padding: 50px;
}
.l-app__hamburger {
position: fixed;
z-index: 1;
}
.c-bike__image {
background: url(http://bikeshopgirl.com/wp-content/uploads/2011/10/15038.jpg) no-repeat;
background-size: contain;
min-height: 100%;
opacity: .9;
top: 0;
position: relative;
}
#media (max-width: 1200px) {
.c-bike__image {
position: static;
width: auto;
opacity: 1;
}
}
.c-bike__header {
font-size: 150%;
padding: 15px;
}
#media (max-width: 1200px) {
.c-bike__header {
padding: 0;
}
}
.c-bike__article {
letter-spacing: .3px;
padding: 10px;
}
.c-bike__article.c-bike__header {
font-size: 120%;
padding: 0;
}
.c-hamburger {
background: transparent;
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background .3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger--icon {
display: none;
}
.c-hamburger--icon ~ .c-hamburger--htx {
transition: transform 1s;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx {
transform: translate(250px, 0) rotate(90deg);
transition: 1s ease-in-out;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span {
background: none;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span::before {
top: 0;
transform: rotate(45deg);
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span::after {
bottom: 0;
transform: rotate(-45deg);
}
.c-hamburger--htx__span {
transition: transform .5s;
}
.c-hamburger--htx__span::before {
transition-property: top, transform;
}
.c-hamburger--htx__span:after {
transition-property: bottom, transform;
}
.c-hamburger__span {
display: block;
position: absolute;
top: 44px;
left: 18px;
right: 18px;
height: 8px;
background: #930202;
border-radius: 5px;
}
.c-hamburger__span::before,
.c-hamburger__span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background: #930202;
border-radius: 5px;
content: "";
}
.c-hamburger__span::before {
top: -20px;
}
.c-hamburger__span::after {
bottom: -20px;
}
<div class="l-app">
<div class="l-app__hamburger">
<input id="c-hamburger--icon" type="checkbox" name="c-hamburger" class="c-hamburger--icon" />
<label for="c-hamburger--icon" class="c-hamburger c-hamburger--htx">
<span class="c-hamburger__span"></span>
</label>
<nav class="l-app__menu"></nav>
</div>
<div class="l-app__left">
<div class="l-app__left--inner c-bike__image"></div>
</div>
<div class="l-app__right">
<div class="l-app__right--inner">
<section class="c-bike">
<header>
<h3 class="c-bike__header">Bike name</h3>
</header>
<article class="c-bike__article">
<header>
<h4 class="c-bike__article c-bike__header">Secion name</h4>
</header>
<p class="c-bike__article c-bike__paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis diam egestas, dictum augue ut, dignissim lorem. Integer eros felis, sodales at viverra et, ultricies malesuada lacus. Nullam ex orci, vulputate vitae porta eu, gravida vel arcu. Curabitur
mattis quis dolor sit amet dapibus. Etiam mattis diam id rhoncus tempor. Phasellus tristique auctor luctus. Nulla ullamcorper tempus porttitor. Sed et tincidunt sem. Morbi dictum ut orci sit amet pretium. Integer feugiat enim vitae neque commodo,
ac malesuada lacus scelerisque. Donec quis odio in ipsum facilisis auctor. Vestibulum turpis turpis, blandit sit amet tempus sed, facilisis nec tellus. Morbi elementum vulputate sem a rhoncus. Vivamus bibendum congue velit, ac hendrerit est
suscipit ac. Nunc a molestie libero.
</p>
</article>
</section>
</div>
</div>
</div>