web-dev-qa-db-ja.com

CSS3でdivを上下に無限に移動する方法は？

こんにちはdivを上下に動かして、topではなくbottomを使用してフローティング/ホバリング効果を与えるという簡単なタスクを実行しようとしています。だから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に戻り、無限ループの効果を与えますか「ホバリング/フローティング」。

htmlcsscss3css-animations
13
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>
44
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>
14
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