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、Iは、所望の効果のために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>