Középről szétnyíló látványos elem

<div class="we-entry-curtain">

    <div class="we-curtain-content">

        <span class="we-entry-label">
            WebElements
        </span>

        <strong>
            Feltáruló tartalom
        </strong>

        <small>
            Középről szétnyíló látványos reveal
        </small>

    </div>

    <div class="we-curtain we-curtain-left"></div>
    <div class="we-curtain we-curtain-right"></div>

    <div class="we-curtain-light"></div>

</div>

.we-entry-curtain {
    width: 100%;
    max-width: 440px;
    height: 190px;
    margin: 60px auto;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 45%,
            rgba(142,232,212,.10),
            transparent 45%),
        #0b1014;

    border: 1px solid rgba(142,240,213,.25);
    border-radius: 18px;

    color: #f2f4f0;
    font-family: Arial, sans-serif;
}

/* A tartalom végig ott van a háttérben */
.we-curtain-content {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 35px 40px;

    opacity: 1;
    transform: scale(.97);

    animation:
        weCurtainContent .9s
        cubic-bezier(.22,1,.36,1)
        .45s forwards;
}

.we-entry-label {
    display: block;
    margin-bottom: 12px;

    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #8ee8d4;
}

.we-curtain-content strong {
    display: block;

    font-size: 27px;
    font-weight: 500;
    letter-spacing: -.5px;
}

.we-curtain-content small {
    display: block;
    margin-top: 10px;

    font-size: 13px;
    color: rgba(242,244,240,.62);
}


/* A két valódi függöny */
.we-curtain {
    position: absolute;
    z-index: 3;

    top: 0;
    width: 50%;
    height: 100%;

    box-sizing: border-box;

    box-shadow:
        0 0 35px rgba(0,0,0,.55),
        inset 0 0 25px rgba(0,0,0,.35);
}


/* Bal függöny */
.we-curtain-left {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #080d10 0%,
            #111c1d 75%,
            #1a302d 100%
        );

    border-right: 2px solid rgba(142,232,212,.45);

    animation:
        weCurtainLeft
        1.35s
        cubic-bezier(.22,1,.36,1)
        .15s forwards;
}


/* Jobb függöny */
.we-curtain-right {
    right: 0;

    background:
        linear-gradient(
            90deg,
            #1a302d 0%,
            #111c1d 25%,
            #080d10 100%
        );

    border-left: 2px solid rgba(142,232,212,.45);

    animation:
        weCurtainRight
        1.35s
        cubic-bezier(.22,1,.36,1)
        .15s forwards;
}


/* Finom fény a középen */
.we-curtain-light {
    position: absolute;
    z-index: 4;

    left: 50%;
    top: 0;

    width: 3px;
    height: 100%;

    transform: translateX(-50%);

    background: #8ee8d4;

    box-shadow:
        0 0 10px rgba(142,232,212,1),
        0 0 30px rgba(142,232,212,.8),
        0 0 60px rgba(142,232,212,.35);

    animation:
        weCurtainLight
        1.35s
        cubic-bezier(.22,1,.36,1)
        .15s forwards;
}


/* Bal oldal ténylegesen kinyílik */
@keyframes weCurtainLeft {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }

}


/* Jobb oldal ténylegesen kinyílik */
@keyframes weCurtainRight {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }

}


/* A középső fény a függönyökkel együtt eltűnik */
@keyframes weCurtainLight {

    0% {
        opacity: 1;
        transform: translateX(-50%) scaleY(1);
    }

    65% {
        opacity: 1;
        transform: translateX(-50%) scaleY(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scaleY(.15);
    }

}


/* A feltáruló tartalom finoman életre kel */
@keyframes weCurtainContent {

    0% {
        opacity: .35;
        transform: scale(.97);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

Ehhez az animációhoz nincs külön JavaScript.

További animációk ebből a kategóriából