Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.01.2021, 10:53
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,541

Сообщение от 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>

Последний раз редактировалось рони, 14.01.2021 в 16:34.
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2021, 12:03
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

рони,
То что нужно. Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 14.01.2021, 14:44
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

рони,
Можете еще помочь сделать так, чтобы анимация начинала движение не сразу, а через 5 секунд после загрузки страницы?
Ответить с цитированием
  #5 (permalink)  
Старый 14.01.2021, 15:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,541

Сообщение от Lefseq
через 5 секунд после загрузки страницы?
animation: move 3s linear forwards 5s;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
анимация подменю повторяется много раз alexscus jQuery 2 28.03.2017 14:58
Выполнить функцию один раз (убрать обработчик) k_DizeL Общие вопросы Javascript 9 16.10.2016 01:56
Выполнение события один раз darl jQuery 5 02.12.2014 08:27
Растянуть DIV снизу вверх Bellski jQuery 2 15.06.2010 19:53
Необходима бегущая строка: непрерывная, снизу вверх Garaeva_Gulnara Элементы интерфейса 3 30.10.2009 18:25