Jak zrobić animowany „efekt fali” w CSS?

Efekt fali w CSS przedstawiony w artykule jest kreatywny i prosty w wykonaniu. Do animacji wykorzystałem tylko CSS!

Jak zrobić efekt fali?

Wystarczy kilka linijek kodu :).

Kod HTML

<div class="wave-wrapper">
    <div class="wave wave-one"></div>
    <div class="wave wave-two"></div>
    <div class="wave wave-three"></div>
</div>

Kod CSS (SCSS)

$color-animation-left--one: #cef3ff;
$color-animation-left--two: #c0efff;
$color-animation-left--three: #d9f5ff;

@mixin wave {
    position: absolute;
    z-index: -1;
    top: -1650px;
    left: calc((100% - 1800px)/2);
    background: $color-animation-left--one;
    width: 1800px;
    height: 1800px;
    border-radius: 43%;
    animation: drift 18000ms infinite linear;
}

.wave {
    @include wave;

    &-wrapper {
        z-index: -1;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
        height: 400px;
        pointer-events: none;
    }

    &-two {
        background: $color-animation-left--two;
        animation-duration: 23000ms;
        left: calc((100% - 1800px)/2 + 200px);
    }

    &-three {
        background: $color-animation-left--three;
        animation-duration: 20000ms;
        left: calc((100% - 1800px)/2 - 200px);
    }
}

@keyframes drift {
    from { transform: rotate(0deg); }
    from { transform: rotate(360deg); }
}

Jak działa powyższy kod

Animacja opiera się na zwykłych divach z tłem oraz zaokrąglonymi rogami (border-radius), które obracają się dzięki transform: rotate(). Wielkość elementu jest tutaj bardzo istotna, ponieważ nadaje ten efekt fali.
Całość oczywiście wykonane z pomocą animacji w CSS (animation).

Warto zwrócić uwagę na regułę left, która wyśrodkowuje nasz element. Przy 1800px ciężko, żeby się zmieścił na mniejszych ekranach :), więc calc() ratuje sytuację.

Podgląd „Efektu fali” na Codepen

Na Codepen można znaleźć jeszcze inny przykład umieszczenia efektu (w środku elementu „card„)

See the Pen Wave animation by pbasiak (@pebe) on CodePen.

Materiały

CSS: transform: rotate() – https://developer.mozilla.org/en-US/docs/Web/CSS/transform

CSS: animation – https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations