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

<p>здравствуйте, я пытаюсь выполнить простую задачу перемещения div вверх и вниз, чтобы получить эффект плавания/зависания, используя bottom вместо top. таким образом, от <code>bottom: 63px</code> до <code>bottom: 400px</code>.</p><p>я новичок в css и ключевых кадрах! как вы, вероятно, можете сказать, но вот что я пробовал, и он, похоже, ничего не делал: </p><pre><code>.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; } } </code></pre><p><strong> обновление </strong></p><p>проблема в том, что он не будет зацикливаться - цель, которую я ищу, достигает 400px, затем мгновенно возвращается к 63px, как бы я мог сделать это до 400px, а затем вернуться к 63px, чтобы получить эффект бесконечного цикла «зависания/плавающий».</p>

<p>вы можете настроить синхронизацию ключевых кадров следующим образом:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.object { animation: moveupdown 1s linear infinite; position: absolute; left: 0; bottom: 0; } @keyframes moveupdown { 0%, 100% { bottom: 0; } 50% { bottom: 100px; } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="object"> hello world! </div></code></pre> </div> </div> </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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); } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div>↓</div></code></pre> </div> </div> </p>

<p>возможно, вы захотите добавить <code>animation-direction: alternate;</code> (или <code>-webkit-animation-direction: alternate</code>) к своим правилам стиля в <code>.piece-open-space #emma</code>. </p><p>это должно дать вам эффект плавания вверх и вниз.</p><p>то есть ваш css должен выглядеть так:</p><pre><code>.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; } </code></pre>