Floating button using css3 animation - html

Question

I want to float the button from right bottom to right top. While floating, it comes to the middle left like shown in attached image. I have tried a few steps but it is not working properly. Any help is highly appreciated. Thank you!
.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

Instead of float: right, I have used position: absolute and right: for the desired effect. Check below snippet.
I have minimized the frames, please modify as per your needs.
.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>