CSS несколько анимаций на одном элементе - PullRequest
Новая
       14

CSS несколько анимаций на одном элементе

0 голосов
/ 19 июня 2019

У меня есть один <div> на моей странице. красный квадрат, и я хочу, чтобы к нему были применены 2 анимации:

  1. Переместить этот квадрат при загрузке страницы
  2. Изменение цвета квадрата при наведении мыши

Вот код: 

<!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/

Проблема в том, что при наведении рта первая анимация прерывается и начинается с начала.

Есть идеи, как сделать так, чтобы эти анимации работали без проблем?

Ответы [ 2 ]

3 голосов
/ 19 июня 2019 

.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>
0 голосов
/ 19 июня 2019

Для изменения цвета фона вам не нужна анимация, просто добавьте свойство background в: 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>
...