CSS 애니메이션 06

좌우로 벌어지는 CSS 애니메이션.

html, body {
    padding: 0;
    margin: 0;
}
.card_animation {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
.card_animation li {
    flex: 1;
    height:100vh;
    text-align: center;
    line-height: 100vh;
    font-size: 50px;
    transition: all 0.5s;
    background: no-repeat center / cover;
}
.card_animation li:hover {
    flex: 2;
    font-size: 70px;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
.card_animation li:not(:hover) {
    flex: 0.7;
}
.card_animation li:nth-child(1) {
    background-image: url("img/animation02_01.jpg");
}
.card_animation li:nth-child(2) {
    background-image: url("img/animation02_02.jpg");
}
.card_animation li:nth-child(3) {
    background-image: url("img/animation02_03.jpg");
}
.card_animation li:nth-child(4) {
    background-image: url("img/animation02_04.jpg");
}

<ul class="card_animation">
    <li>mjae01</li>
    <li>mjae02</li>
    <li>mjae03</li>
    <li>mjae04</li>
</ul>

REFERENCE
https://www.youtube.com/watch?v=E61_pdj9mUc&list=PL_6yF2upGJYvYTwdH42s2QjqNIohSujcQ&index=1&t=18s