CSS multiple animations on the same element

Question

I have a single <div> on my page. red square and I want 2 animations to be applied to it:

Move this square on page load
Change the colour of the square on mouse hover

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    .animation {
        width: 150px;
        height: 150px;
        background-color: red;
        animation-name: anim;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }

    .animation:hover {
        animation-name: hover;
        animation-duration: 1s;

    }

    @keyframes anim {
        from {
        }
        30% {
            transform: translateX(100px);
        }
        70% {
            transform: translate(100px, 100%);
            /*background-color: blue;*/
        }
        100% {
            transform: translate(100px, 100%) scale(2, 2) rotate(145deg);
        }
    }

    @keyframes hover {
        from {
        }
        to {
            background:yellow;
        }
    }
</style>
</head>
<body>
<div class="animation">
</div>
</body>
</html>

https://jsfiddle.net/tbqj4goy/

The problem with it is that when I hover the mouth the first annimation interrupts and starts from the beginning.

Any ideas how to let these annimation collaborate without problems?

no need a second animation, use a simple transition for the color change — Temani Afif
– Temani Afif, Commented Jun 19, 2019 at 9:29
@TemaniAfif I tried this, but I'm just curious is it possible to use multiple annotations, and why if not — evgeniy44
– evgeniy44, Commented Jun 19, 2019 at 9:31
you can and you need to put them in the same animation. Example: stackoverflow.com/a/56510103/8620333 — Temani Afif
– Temani Afif, Commented Jun 19, 2019 at 9:33

Wimanicesir · Accepted Answer · 2019-06-19 11:47:53Z

3

.animation {
    width: 150px;
    height: 150px;
    background-color: red;
    animation-name: anim;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    transition: 1s;
}

.animation:hover {
    background-color: yellow;
    transition: 1s;
}

@keyframes anim {
    from {}

    30% {
        transform: translateX(100px);
    }

    70% {
        transform: translate(100px, 100%);
        /*background-color: blue;*/
    }

    100% {
        transform: translate(100px, 100%) scale(2, 2) rotate(145deg);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="animation">
</div>
</body>
</html>

edited Jun 19, 2019 at 11:47

answered Jun 19, 2019 at 9:32

Wimanicesir

5,1592 gold badges14 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

evgeniy44 Over a year ago

one more question regarding your solution: if I'm moving mouth off the square it immediately becomes red. is it possible to make it animated as well(yellow -> red on mouth off)?

Wimanicesir Over a year ago

Yeah ofcourse, I editted it. You just have to add the transition to the original class (without any state)

novruzrhmv · Accepted Answer · 2019-06-19 09:37:21Z

0

For change background color you don't need animation, just add background property to :hover;

        .animation {
            width: 150px;
            height: 150px;
            background-color: red;
            transition: background-color 250ms ease;
            animation: anim 3s forwards;
        }

        .animation:hover {
           background-color: yellow;
        }

        @keyframes anim {
            from {
            }
            30% {
                transform: translateX(100px);
            }
            70% {
                transform: translate(100px, 100%);
                /*background-color: blue;*/
            }
            100% {
                transform: translate(100px, 100%) scale(2, 2) rotate(145deg);
            }
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="animation">
</div>
</body>
</html>

answered Jun 19, 2019 at 9:37

novruzrhmv

6395 silver badges15 bronze badges

2 Comments

Wimanicesir Over a year ago

You posted same solution as me later but forgot the transition of the hover.

novruzrhmv Over a year ago

First of all i didn't see your comment when I wrote my comment and adding transition only element is enough. You can check code snippet.

Collectives™ on Stack Overflow

CSS multiple animations on the same element

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related