我想将按钮从右下 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>
最佳答案
我使用了 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>
关于html - 使用css3动画的 float 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38069172/