Creating Floating Effects Using CSS3

Introduces how to implement floating effects using CSS3.

By the way, if you do this, shadows will appear.

@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.5);
        transform: translatey(0px);
    }
    50% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.0);
        transform: translatey(-20px);
    }
    100% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.5);
        transform: translatey(0px);
    }
}

Also, since this method uses CSS3 animations, you can change the speed of the floating effect by changing the animation time.

animation: float 3s ease-in-out infinite;

You can change the speed of the floating effect by changing the 3s part.

Summary

Introduced how to implement floating effects using CSS3.