Форум Сайтостроение Веб-строительство

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

D
На сайте с 01.09.2015
Offline
59
Digistive
184

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

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

[Удален]
#1
Хм, "снизу вверх и осталась вверху"? возможно, вот этот эффект, с которым раздаются карты верхнего ряда?  - нажмите кнопку 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
На сайте с 19.07.2010
Offline
152
nezabor
#2
таки у вас движение в 
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;
  }
}

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

Чудес не бывает...

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий