Skip to content

Float Effect

This showcases some ways to make objects look like they're floating.

Float Effect #1

Solution

html
<div class="float"></div>
css
/* tunable: float shape */
@keyframes float {
    from {
        transform: translate(-10px, -5px);
    }
    10% {
        transform: translate(-5px, -10px);
    }
    50% {
        transform: translate(10px, 5px);
    }
    60% {
        transform: translate(5px, 10px);
    }
    to {
        transform: translate(-10px, -5px);
    }
}

.float {
    margin: 100px;
    height: 64px;
    width: 64px;
    background-color: coral;
    
    animation-name: float;
    animation-duration: 3s; /* tunable: floating duration */
    animation-iteration-count: infinite;
    animation-timing-function: linear; /* tunable: soften the movement ? */
}