使用css3動畫的浮動按鈕

Question

我想浮動按鈕從右下角到右上角。在浮動的時候，它會出現在附圖所示的中間左側。我已經嘗試了幾個步驟，但無法正常工作。任何幫助，高度讚賞。謝謝！

.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

代替float: right，我已經使用position: absolute和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>