CSS transition doesn't work after Javascript

Question

I've got a script that adds an animation to elements with their individual offsets so they fade in one by one.

/*eslint-env es6*/

$(document).ready(function(){

    const selectCategory = document.getElementsByClassName("home-select-category-icon");

    for (var i = 0; i < selectCategory.length; i++) {
        selectCategory[i].style.animation = `fadeInCategory 2s ease-out ${ i/2+1 }s 1 forwards`;
    }

});

I also have some css that expands the scale of the element when you mouse over it (using :hover), and i added a transition in css too.

After everything has faded in, the transition works for a short amount of time, before it returning to no transition and the transition between the scaled and non scaled element is snappy.

I want to have a transition between the scaled element and the non scaled element, but after every fade inanimation is finished, there is no transition whatsoever.

I've looked all over to find answers and I'm stuck, I've spent ages searching to find answers and none of them seem to work for me.

Here's the link to my code

Any help is appreciated, thanks a lot

its not clear in your question that what is the desired output? — Atul Rajput
– Atul Rajput, Commented Jun 8, 2020 at 17:16
@AtulRajput Sorry about that, im shocking at articulating. I updated my question — Ben
– Ben, Commented Jun 8, 2020 at 17:21
I think its because both your css animation and your hover transition are messing with the transform property. Try updating your fadeInCategory css animation (remove the transform) to something like margin-top: -30px @ 0% and margin-top: 0 @ 60% and see if you get better results. margin-top also might not be the best replacement... maybe top? — zgood
– zgood, Commented Jun 8, 2020 at 17:30

zgood · Accepted Answer · 2020-06-08 17:53:18Z

I think you should keep your animation and transition effects on separate elements. Adding them to the same element (.home-select-category-icon in your case) will cause issues because the will override each other if you are animating the same property, like transform.

In my comment I said you can replace the transform with margin-top in your fade in animation, which would work... but I think its better to just keep them separate - even if that means creating a wrapping div or span just for animation purposes.

In your case I would move your hover transition to your .home-select-category element.

So add this:

.home-select-category {
   -webkit-transition:all 5s;
}

.home-select-category:hover {
   -webkit-transform: scale(1.2); 
}

and then remove those styles from the .home-select-category-icon styles.

Demo:

/*eslint-env es6*/

$(document).ready(function(){

    const selectCategory = document.getElementsByClassName("home-select-category-icon");

    for (var i = 0; i < selectCategory.length; i++) {
        selectCategory[i].style.animation = `fadeInCategory 2s ease-out ${ i/2+1 }s 1 forwards`;
    }

});

html{
    height: 100%;
    width: 100%;
}

#home-select-div{
    -webkit-animation: 2s ease-out 0s 1 d;
}

@-webkit-keyframes fadeInCategory{
    0% {opacity: 0; -webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(0px);}
    100% {opacity: 1;}
}

@-webkit-keyframes fadeInTitle{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

html body #fb-spacer{
    height:100%;
}

*{
    margin: none;
    padding: none;
}

body{
    height: 100%;
    width: 100%;
    background: #121212;
}

#fb-spacer{
    height: 100%;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#home-welcome{
    font-family: "Muli", sans-serif;
    color: white;
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 20px;
    padding: 100px 0px;
    -webkit-animation: fadeInTitle 1.5s ease-in 0s 1 forwards;   
}

#home-select-div{
    width:80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.home-select-category-icon{
    background: none;
    border: none;
    outline: none; 
    padding: 0px 50px;
    opacity: 0;
}

.home-select-icon{
    color: white;
    font-size: 100px;
}

.home-select-category-subtitle{
    color: white;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 24px;
    font-family: "Muli", sans-serif;
}

.home-select-category {
   -webkit-transition:all 5s;
}

.home-select-category:hover {
   -webkit-transform: scale(1.2); 
}

<!DOCTYPE html>
<!--
                      _       _       
                     | |     | |      
  _ __ ___   ___   __| |_   _| | ___  
 | '_ ` _ \ / _ \ / _` | | | | |/ _ \ 
 | | | | | | (_) | (_| | |_| | | (_) |
 |_| |_| |_|\___/ \__,_|\__,_|_|\___/ 
                                      
                                      
-->
<html lang="en">
    <head>
        
        <meta charset="utf-8">
        <title>Modulo HTPC</title>
        <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300&display=swap" rel="stylesheet">
        <link href="home.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://kit.fontawesome.com/efa620f8a0.js" crossorigin="anonymous"></script>
        <script async src="home.js"></script>
        
    </head>
    <body>
        <div id="fb-spacer">
            <div id="home-welcome">
                <h1>Welcome back</h1>
            </div>
            <div id="home-select-div">
                <button class="home-select-category-icon">
                    <div id="home-select-game" class="home-select-category">
                        <i class="fas fa-gamepad home-select-icon"></i>
                        <p class="home-select-category-subtitle">Gaming</p>
                    </div>
                </button>
                <button class="home-select-category-icon">
                    <div id="home-select-movie" class="home-select-category">
                        <i class="fas fa-video home-select-icon"></i>
                        <p class="home-select-category-subtitle">Movie</p>
                    </div>
                </button>
                <button class="home-select-category-icon">
                    <div id="home-select-music" class="home-select-category">
                        <i class="fas fa-music home-select-icon"></i>
                        <p class="home-select-category-subtitle">Music</p>
                    </div>
                </button>
                <button class="home-select-category-icon">
                    <div id="home-select-exit" class="home-select-category">
                        <i class="fas fa-sign-out-alt home-select-icon"></i>
                        <p class="home-select-category-subtitle">Exit</p>
                    </div>
                </button>
            </div>
        </div>
    </body>
</html>

Thanks so much, this work perfectly. I was about to go insane lol

Collectives™ on Stack Overflow

CSS transition doesn't work after Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related