I have been attempting to create a sliding animation on both the logo and header text when clicking on the menu button. The desired effect is for both elements to slide left, with the menu sliding out of the screen and the text sliding in to replace the logo's position. Additionally, a dropdown menu should appear on the screen. You can view a demonstration of this in the following JS Fiddle: https://jsfiddle.net/n9tjvrjt/
Despite my efforts, I have been unsuccessful in getting this animation to work. The code provided in the JS Fiddle includes additional code that I believe is necessary to demonstrate my attempts. I have focused on using transitions, but for some reason they do not seem to be functioning correctly. Below is an excerpt of the relevant code:
@media only screen and (max-width: 670px) {
html body .wrapper .header-wrapper .header-row .header-cell.header-profile {
display: none;
}
html body .wrapper .header-wrapper .header-row .header-cell.header-profile.active {
display: table-cell;
width: 100%;
padding-left: 20px;
-moz-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
transition: 3s;
}
html body .wrapper .header-wrapper .header-row .header-cell.header-logo.active {
position: absolute;
left: -335px;
-moz-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
transition: 3s;
}
}
While the code in the fiddle resembles the desired behavior, the animation never actually plays. I am unsure as to why this issue persists and would greatly appreciate any assistance.
Furthermore, please disregard the lengthy class names, as they are a result of compiling a sass file for the sake of illustrating the problem.
It is crucial to resize your screen to under 670 pixels when testing the demo on the fiddle.