Как перебрать анимацию CSS?

Я учусь делать анимацию в CSS. Я знаю, что могу установить свойство iteration-count на бесконечность, и оно будет работать бесконечно, но я хочу, чтобы цикл был плавным. После возврата к 0% в ключевом кадре анимация не будет гладкой и мгновенно изменится на это свойство. Я хочу, чтобы переход от 100% к 0% был плавным, если это имеет смысл.

Это мой HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Animations</title>
</head>
<body>
    <div id="shape"></div>
</body>
</html>

Это мой CSS

*
{
    margin:0px;
    padding:0px;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
#shape
{
    background-color: red;
    width:100px;
    height:100px;
    border-radius:50%;
    border:0px;
    animation-name:color-function;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
@keyframes color-function
{
    0%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
    25%
    {
        background-color: yellow;
        height:100px;
        border-radius: 50%;
    }
    50%
    {
        background-color: blue;
        height:100px;
        border-radius: 50%;
    }
    75%
    {
        background-color: green;
        height:100px;
        border-radius: 50%;
    }
    100%
    {
        background-color: red;
        height:150px;
        border-radius: 0%;
    }
}

Спасибо


html css css-animations web-frontend web-animations
person Sai Abhi    schedule 08.03.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите, чтобы Переход был плавным, то, очевидно, вы должны сделать окончание равным началу.

Тогда нет разницы между началом и концом.

Я сделал свою собственную версию вашего кода CSS, чтобы показать вам, как я бы это сделал. Вы должны изменить его, чтобы сделать свою собственную версию.


@keyframes color-function
{
    0%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
    20%
    {
        background-color: yellow;
        height:100px;
        border-radius: 50%;
    }
    40%
    {
        background-color: blue;
        height:100px;
        border-radius: 50%;
    }
    60%
    {
        background-color: green;
        height:100px;
        border-radius: 50%;
    }
    80%
    {
        background-color: red;
        height:150px;
        border-radius: 0%;
    }
    100%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
}
person Crusty    schedule 08.03.2021
comment
Спасибо. Это решило мою проблему. Но есть ли другой способ сделать переход плавным без добавления лишнего кода в css? - person Sai Abhi; 08.03.2021
comment
Конечно, есть. Готовы ли вы использовать Java Script, чтобы вытащить ковер из-под CSS и оставить его стоять с открытым ртом? - person Crusty; 08.03.2021
comment
Ну, я не знаю JavaScript, но в какой-то момент мне интересно его изучить. Я учту ваш совет и попытаюсь сделать эту анимацию с помощью JavaScript. Спасибо. - person Sai Abhi; 08.03.2021

arrow_upward
1
arrow_downward

Я скажу тебе что. Я избавлю вас от необходимости изучать JavaScript и просто дам вам код, который решит вашу проблему.

Во-первых, вам придется изменить исходный код HTML, чтобы вызвать файл JavaScript:

<body>

    <div id="shape"></div>

<script src="./myScripts.js" type="text/javascript"></script>

</body>

Далее вам нужно будет взять обычный старый обычный текстовый файл (назовем его AAA.txt ) и поместить этот текстовый файл рядом с вашим style.css файлом.

Внутри текстового файла вставьте следующий текст:

document.head.insertAdjacentHTML("beforeend", " <style> " + 
  " #shape { background-color: red; width:100px; height:100px; border-radius:50%; } " + 
  " #shape { border:0px; animation-name:color-function; animation-duration: 5s; } " +
  " #shape { animation-timing-function: linear; animation-iteration-count: infinite; } " +
  " #shape { animation-fill-mode: forwards; } " +
  " @keyframes color-function { " +
  " 0% { background-color: red; height:100px; border-radius: 50%; } " +
  " 20% { background-color: yellow; height:100px; border-radius: 50%; } " +
  " 40% { background-color: blue; height:100px; border-radius: 50%; } " +
  " 60% { background-color: green; height:100px; border-radius: 50%; } " +
  " 80% { background-color: red; height:150px; border-radius: 0%; } " +
  " 100% { background-color: red; height:100px; border-radius: 50%; } } " +
  " </style>" ) ;

Как видите, на самом деле это был не текстовый файл, который вы создали, а файл JavaScript. Поэтому переименуйте файл с AAA.txt на myScripts.js.

Все остальное останется без изменений. Вы будете использовать исходный файл style.css без каких-либо изменений. Вы можете запустить свой (модифицированный) html-файл так же, как вы привыкли делать, и все должно работать так, как вы этого хотите.

И, кстати, после прочтения кода JavaScript вы видите, почему CSS стоит с открытым ртом?

person Crusty    schedule 08.03.2021
comment
Это очень помогает! Спасибо! Сейчас буду изучать JavaScript. Выглядит очень интересно. :) - person Sai Abhi; 13.03.2021