it-swarm.com.ru

Как перемещать div вверх и вниз бесконечно в CSS3?

Здравствуйте, я пытаюсь выполнить простую задачу перемещения div вверх и вниз, чтобы получить эффект плавания/зависания, используя bottom вместо top. Таким образом, от bottom: 63px до bottom: 400px.

Я новичок в CSS и ключевых кадрах! Как вы, вероятно, можете сказать, но вот что я пробовал, и он, похоже, ничего не делал: 

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    position: absolute;
    display: block;
    width: 244px;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
}

@-webkit-keyframes MoveUpDown {
    from {
        bottom: 63px;
    }
    to { 
        bottom: 400px;
    }
}

Обновление

Проблема в том, что он не будет зацикливаться - цель, которую я ищу, достигает 400px, затем мгновенно возвращается к 63px, как бы я мог сделать это до 400px, а затем вернуться к 63px, чтобы получить эффект бесконечного цикла «зависания/плавающий».

9
user3112634

Вы можете настроить синхронизацию ключевых кадров следующим образом:

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}
<div class="object">
  hello world!
</div>

40
Stickers

div {
        -webkit-animation: action 1s infinite  alternate;
        animation: action 1s infinite  alternate;
    }
    @-webkit-keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
    @keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
<div>&#8595;</div>

7
srijishks

Возможно, вы захотите добавить animation-direction: alternate; (или -webkit-animation-direction: alternate) к своим правилам стиля в .piece-open-space #emma

Это должно дать вам эффект плавания вверх и вниз.

То есть Ваш CSS должен выглядеть так:

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    display: block;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
    -webkit-animation-direction: alternate;
}
0
burnedikt