Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Анимация изображения снизу-вверх один раз (https://javascript.ru/forum/xhtml-html-css/81695-animaciya-izobrazheniya-snizu-vverkh-odin-raz.html)

Lefseq 14.01.2021 10:53
Анимация изображения снизу-вверх один раз
 
Здравствуйте. Подскажите как сделать, так чтобы картинка совершила одно вертикальное движение снизу вверх и осталась вверху?

<div class="square"></div>


Код:
.square {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: #d42929;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    animation: move 3s linear alternate infinite;
}


 @keyframes move {
    0% {
        bottom: 0;
    }
    100% {
        top: 200px;
    }
}

рони 14.01.2021 11:08
Цитата:
Сообщение от Lefseq
одно вертикальное движение снизу вверх и осталась вверху?
 
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .square {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: #d42929;
    position: absolute;
    top: calc(100% - 200px);
    left: 0;
    z-index: 1;
    animation: move 3s linear forwards 5s;
}
 @keyframes move {
    to {
       top: 0;
    }
  }
    </style>
</head>
<body>
<div class="square"></div>
</body>
</html>

Lefseq 14.01.2021 12:03
рони,
То что нужно. Спасибо!

Lefseq 14.01.2021 14:44
рони,
Можете еще помочь сделать так, чтобы анимация начинала движение не сразу, а через 5 секунд после загрузки страницы?

рони 14.01.2021 15:54
Цитата:
Сообщение от Lefseq
через 5 секунд после загрузки страницы?
:( animation: move 3s linear forwards 5s;


Часовой пояс GMT +3, время: 11:57.