Форум

Lefseq · #1 (**permalink**) 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;
    }
}

рони · #2 (**permalink**) 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 · #3 (**permalink**) 14.01.2021, 12:03

рони,
То что нужно. Спасибо!

Lefseq · #4 (**permalink**) 14.01.2021, 14:44

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

рони · #5 (**permalink**) 14.01.2021, 15:54

Сообщение от Lefseq

через 5 секунд после загрузки страницы?

animation: move 3s linear forwards 5s;

Форум

Справочник

Discord чат

Курсы javascript