Анимация изображения снизу-вверх один раз

Digistive

14 января 2021, 08:05

146

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

<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;
    }
}

keepersheet

15 января 2021, 00:55

Хм, «снизу вверх и осталась вверху»? возможно, вот этот эффект, с которым раздаются карты верхнего ряда? — нажмите кнопку start.

Ruby on Rails Web Development

masterpro.herokuapp.com

Royal Flush The best possible hand in Texas hold’em is the combination of ten, jack, queen, king, ace, all of the same suit. Straight Flush Five cards of the same suit in sequential order. Four Of A Kind Any four numerically matching cards. Full House Combination of three of a kind and a pair in the same hand. Flush Five cards of the same suit…

nezabor

7 февраля 2021, 15:55

таки у вас движение в

Digistive :
.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; } }

таки у вас наоборот сверху вниз
кстати тут у вас не от экрана пляшет а от фрейма который relative

давайте вот так попробуем

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

.frame_div {
  height: calc(100vh);
  width: calc(100vw);
  position: relative;
}

.square {
  width: 200px;
  height: 200px; 
  border-radius: 10px;
  background-color: #d42929;
  position: absolute;
  top: calc(100vh - 200px);     
  left: 0;     
  z-index: 1;
  animation: move 3s linear alternate infinite; /*3 секунды многовато?*/
} 
@keyframes move {
  0% {
    top: calc(100vh - 200px); /*вычитаем высоту объекта чтобы не уплыл ниже*/
0;
  }
  100% {
    top: 0;
  }
}

не пробовал сработает или нет

Похожие записи:

Добавить комментарий Отменить ответ