We Keep Coding

Toggling between classes keeps animation from going through, just skips to end

I'm trying to animate a hamburger menu by having the bottom and top line translate to the middle and then rotate into an X and want to reverse the animation when the X is clicked. Using jquery I'm toggling the class menu-open and menu-closed. When I remove the CSS for the menu-closed animation, it fires just fine but when I add the CSS back the animations just skip to the last frame. It forms what I want but just refuses to use the animation fully.
CSS
.navbar .mobile-menu.menu-open .line::before {
animation: menu-open-top 250ms linear forwards;
}
.navbar .mobile-menu.menu-open .line {
animation: menu-middle 250ms linear forwards;
}
.navbar .mobile-menu.menu-open .line::after {
animation: menu-open-bottom 250ms linear forwards;
}
.navbar .mobile-menu.menu-closed .line::before {
animation: menu-open-top 250ms linear reverse;
}
.navbar .mobile-menu.menu-closed .line {
animation: menu-middle 250ms linear reverse;
}
.navbar .mobile-menu.menu-closed .line::after {
animation: menu-open-bottom 250ms linear reverse;
}
Animation
#keyframes menu-open-top {
30% {
bottom: 0;
}
60% {
bottom: 0;
transform: rotate(0) translate(0);
}
100% {
transform: rotate(45deg) translate(5px, 5px);
visibility: visible;
}
}
#keyframes menu-middle {
40% {
visibility: hidden;
}
to {
visibility: hidden;
}
}
#keyframes menu-open-bottom {
30% {
top: 0;
}
60% {
top: 0;
transform: rotate(0) translate(0);
}
100% {
transform: rotate(-45deg) translate(6px, -6px);
visibility: visible;
}
}
JS
$(".mobile-menu").click(expandMenu);
function expandMenu() {
$(".primary-nav").toggleClass("menu-expand");
$(this).toggleClass("menu-open menu-closed");
}
I must be missing something or maybe I need to add new keyframes for the reverse animation but that feels like it would be unnecessary.
edit: here is the html as well
HTML
<div class="mobile-menu menu-closed">
<div class="line"></div>
</div>

Here's how to do it using simple prop value changes with careful timing. I guess it can be done using #keyframe animations as well, but I find them more difficult to follow/control/sync, at least in this case, considering it's (basically) a two-step animation.
document.querySelector('.mobile-menu').addEventListener('click', ({
target
}) => {
target.closest('.mobile-menu').classList.toggle('menu-open');
})
.mobile-menu {
--duration: 0.42s;
--size: 3rem;
--padding: 0.5rem;
--color: red;
--distance-timing: cubic-bezier(0.5, 0, 0.3, 1);
--rotation-timing: cubic-bezier(0.4, 0, 0.2, 1);
width: var(--size);
height: var(--size);
padding: var(--padding);
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.mobile-menu * {
box-sizing: border-box;
}
.mobile-menu>div {
border: 1px solid var(--color);
height: 0;
width: 100%;
position: relative;
transform-origin: 50% 50%;
transition:
top calc(0.6 * var(--duration)) var(--distance-timing) calc(0.4 * var(--duration)),
bottom calc(0.6 * var(--duration)) var(--distance-timing) calc(0.4 * var(--duration)),
transform calc(0.8 * var(--duration)) var(--rotation-timing) 0s;
}
.mobile-menu> :nth-child(1) {
top: calc(var(--padding)/2);
}
.mobile-menu> :nth-child(3) {
bottom: calc(var(--padding)/2);
}
.mobile-menu.menu-open>div {
transition:
top calc(0.4 * var(--duration)) var(--distance-timing) 0s,
bottom calc(0.4 * var(--duration)) var(--distance-timing) 0s,
transform calc(0.8 * var(--duration)) var(--rotation-timing) calc(0.2 * var(--duration));
}
.mobile-menu.menu-open> :nth-child(1) {
top: calc(50% - 1px);
transform: rotate(0.125turn);
}
.mobile-menu.menu-open> :nth-child(2) {
transform: rotate(0.125turn);
}
.mobile-menu.menu-open> :nth-child(3) {
bottom: calc(50% - 1px);
transform: rotate(-0.125turn);
}
<div class="mobile-menu">
<div></div>
<div></div>
<div></div>
</div>
Same thing, in SCSS: https://jsfiddle.net/websiter/dybre2f9/
I've extracted the values into CSS vars, so it can be reused and modified with ease. Feel free to tweak it to your liking.
Note: the reason why I'm using bottom and top to animate the movement (and not translateY - which is slightly more performant) is because I wanted the two animations to be completely independent of each other, to allow me to play with various overlapping values and timing functions. What I've come up with doesn't respect the requirement 100% (as in, it slightly overlaps the rotation with the movement - but I'm doing it on purpose, as not overlapping them looks too mechanical). When overlapped, the entire animation seems more organic. It's like the button is alive and happy to have been asked to do the animation. Or maybe I'm just a bit crazy, I don't know...

CSS transition does not work on mobile

Please have a look at the animation below. While you may see that it works on PC, there must be something wrong since it does not work on mobile. For example on Android, the image is zoomed and with opacity 1 from the very beginning. I assume that the transition has been made but the duration was 0s. Thank you for your help.
$(document).ready(function(){
$(".photo").css(" -moz-transform", "scale(1.2)");
$(".photo").css("-webkit-transform", "scale(1.2)");
$(".photo").css("-o-transform", "scale(1.2)");
$(".photo").css("opacity", "1");
$(".photo").css("transform", "scale(1.2)");
});
.photo {
display: inline-block;
vertical-align:top;
max-width:100%;
opacity: 0.1;
-moz-transition: transform 40s, opacity 6s;
-webkit-transition: transform 40s, opacity 6s;
transition: transform 40s, opacity 6s;
}
.photoDiv {
display: inline-block;
background-color: #f1f1f1;
width: 100%;
position: relative;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photoDiv">
<img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>

I think it's cleaner to remove the CSS from JS. Also jQuery is redundant and way too big for what you are trying to do here. Also make sure to add the JS at the end of the body. This way you are sure the content is loaded before JS will even be loaded.
window.addEventListener('load', function() {
var photos = document.getElementsByClassName('photo');
if( photos )
{
for( var i = 0; i < photos.length; i++ )
{
var photo = photos[i];
photo.classList.add('active');
}
}
});
.photo {
display: inline-block;
vertical-align:top;
max-width:100%;
opacity: 0.1;
/*ease-in-out is the animation, 2s is the delay/ pause*/
transition: transform 40s ease-in-out 2s, opacity 6s ease-in-out 2s;
transform: scale(1);
}
.active {
opacity: 1;
transform: scale(1.2);
}
.photoDiv {
display: inline-block;
background-color: #f1f1f1;
width: 100%;
position: relative;
overflow: hidden;
}
<div class="photoDiv">
<img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>

No exit animation applied - Polymer

I have a paper-icon-button that animates (spin & opacity) when I hover an image using on-mouseenter and on-mouseleave.
The animations occur properly on-mouseenter, but the paper-icon-button simply disappears on-mouseleave rather than repeating the animation.
Can anybody help?
HTML
<img id="avatar" class="userAvatar" src="../images/hipster.png" slot="item-icon" on-mouseenter="cogSpin" on-mouseleave="cogSpin"></img>
<paper-icon-button id="cogSpin" icon="settings" class="cog" on-click="doSomething"></paper-icon-button>
CSS
.cog {
position: fixed;
color: white;
top: 129px;
left: 64px;
opacity: 0;
transition: opacity 1s, transform ease-in-out 1s;
visibility: hidden;
}
.cogOn {
visibility: visible;
opacity: 1;
transform:rotate(360deg);
}
JS
cogSpin : function() {
// css class only applied if the drawer containing it has been expanded
if(this.$.drawer.classList.contains('drawerExpand')) {
this.$.cogSpin.classList.toggle('cogOn');
}
}

That's because visibility:hidden; and it's counterpart is not an animatable CSS property. (See dev docs regarding interpolation)
Change your CSS rule to:
.cog {
position: fixed;
color: white;
top: 129px;
left: 64px;
opacity: 0;
transition: opacity 1s, transform ease-in-out 1s;
}
.cogOn {
opacity: 1;
transform:rotate(360deg);
}
The visibility property is unnecessary in any case thanks to your use of opacity.

How to add css transitions to js scroll in header?

I have a header that appears when the page scrolls down. I am trying to add css transitions to make it fade in and out because I've read that using javascript for fading is not as efficient.
.header-wrapper {
top:0;
left:0;
right:0;
position: fixed;
display:none;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
.header-wrapper.active {
display:block;
}
.header {
background-color:#000;
height:80px;
}
Here is the js fiddle
$(window).scroll(function () {
var y = $(window).scrollTop();
// if above 300 and doesn't have active class yet
if (y > 300 && !$('.header-wrapper').hasClass('active')) {
$('.header-wrapper').addClass('active');
// if below 300 has still has active class
} else if(y <= 300 && $('.header-wrapper').hasClass('active')) {
$('.header-wrapper').removeClass('active');
}
});

Transitions are added with the css3 property transition.
One common reason for confusion: you can only transition properties that accept numeric values. Thus, you can't transition between display: block and display: none.
However you can transition between opacity: 0 and opacity: 1 with:
transition: 0.5s opacity
That would look something like this:
.bottomMenu {
...
opacity: 0;
transition: 0.5s opacity;
...
}
.bottomMenu.active {
opacity: 1;
}
For your particular case, I might recommend transitioning the height between 0 and 60px.
For that you can use:
transition: 0.5s height
So:
.bottomMenu {
...
height: 0;
transition: 0.5s height;
...
}
.bottomMenu.active {
height: 80px;
}

To animate the opacity the element must be visible. So remove the display:none and make it fully transparent (opacity:0). You can then use CSS transitions to animate the opacity when the classname changes:
.bottomMenu {
...
display:block;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.bottomMenu.active {
opacity:1
}
http://jsfiddle.net/oL9ro4gL/6/
Furthermore, you're not restricted to just animating the opacity:
.bottomMenu {
...
transition: all .25s ease-in-out;
}
.bottomMenu.active {
opacity:1;
height: 60px;
background-color: blue;
transform:rotate(180deg);
color:white;
font-size:40px;
etc...
}
http://jsfiddle.net/oL9ro4gL/8/

Unfortunately, you can't animate the display property. See this question and its suggestions for workarounds.

CSS linear animation across screen

I have a car which im moving to the right of the screen. (the car needs to start from left infinity and go out of the screen on the right).
But the animation repeats just once and stops.
<div class="car-right">
<img class="car-right-image"src="/assets/car-right.png" alt="">
</div>
.car-right {
position: absolute;
top: 86%;
left: -200px;
z-index: 10;
}
.transit-right {
-webkit-transform: translate(1920px,0);
-webkit-transition: all 30s ease-in-out;
transition: all 30s ease-in-out;
z-index: 10;
}
$(function() {
return $('.car-right-image').addClass("transit-right");
});
What am i doing wrong here ? ... how do i make the car keep coming from the left infinity and dissapear to the right ? ...
I know i gotta do something with keyframes and the infinite atrribute.
But cant seem to get it ...
Any help is highly appreciated, thanks.
Regards
-Skykog

jQuery solution, here's a FIDDLE
.car-right-image {
position: absolute;
width: 260px;
left: -260px;
}
$(function() {
setInterval(function() {
$('.car-right-image').animate({ left: $(window).width() + 'px' }, 3000, 'linear', function() {
$(this).css({ left: - $(this).width() + 'px' });
});
}, 10);
});

You need to use CSS Animations not transitions.
.car-right {
position: absolute;
top: 86%;
left: -200px;
z-index: 10;
background-color: red;
animation-duration: 4s;
animation-name: goRight;
animation-iteration-count: infinite;
}
#keyframes goRight {
from {
transform: translate(0,0);
}
to {
transform: translate(1920px,0);
}
}
There is no need for jQuery for this.
Here is a demo running at a 4 seconds interval: http://jsfiddle.net/NrLy8/1/