floating effect for text - html

Question

I want to apply floating effect to some texts. I tried it using marquee.
.bounce {
height: 50px;
overflow: hidden;
position: relative;
}
.bounce p {
position: absolute;
width: 50%;
margin: 0;
line-height: 50px;
text-align: center;
color: #FFF;
opacity: 0.7;
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
-moz-animation: bouncing-text 25s linear infinite alternate;
-webkit-animation: bouncing-text 25s linear infinite alternate;
animation: bouncing-text 25s linear infinite alternate;
}
#keyframes bouncing-text {
0% {
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="bounce">
<p>SOFT LANDSCAPING</p>
<br />
<p>HARD LANDSCAPING</p>
<br />
</div>
This is for bouncing. I want to make the text float like in the water.
Please help me to find a solution. If any other way please let me know.

Answer 1

You can achieve this using css3 animation-name property.
HTML:
<div class="floating">
Floating effect like water
</div>
CSS :
.floating {
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
#-webkit-keyframes Floatingx {
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px);}
}
#-moz-keyframes Floating {
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}
Here is working fiddle.
For more on how animation-name works, check this out : animate-name property.

Answer 2

You could do it with hover.css. You have to use the code from the :hover selector and add it to the element's style itself to make it work.
.hvr-bob {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
Check the JSFiddle. Don't forget to add hover.css / hover-min.css.