html - 使用css3动画的 float 按钮

Question

我想将按钮从右下 float 到右上。漂浮时，它会如附图所示到达中间左侧。我已经尝试了几个步骤，但它无法正常工作。非常感谢任何帮助。谢谢!

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, -1000);
    transform: translate3d(0, 10px, -1000);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

<div style="float:right;"  class="animated infinite bounceInUp">Button</div>

Answer 1

我使用了 position: absolute 和 right: 来达到预期的效果，而不是 float: right。检查以下代码段。

框架我已经最小化了，请根据您的需要修改。

.animated {
  background-color: coral;
  padding: 4px 10px;
  position: absolute;
  right: 0px;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
@keyframes bounceInUp {
  from {
    right: 0px;
    opacity: 0;
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
  }
  60% {
    opacity: 1;
    right: 40%;
  }
  to {
    right: 0px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

<div class="animated infinite bounceInUp">Button</div>