[Front-end🦁] #7 CSS flex、grid/animation

1. flex, grid

2.Web開発プロジェクト

2-1. アニメーションを使用したターンテーブル

@keyframe ani {
    0% { transform: translateY(0px); }
    25% { transform: translateY(-20%); }
    50% { transform: translateY(-40%); }
    75% { transform: translateY(-60%); }
    100% { transform: translateY(-80%); }
}
.aespa {
    margin: 100px;
    font-size: 50px;
    text-align: center;
    color: cornflowerblue;
}
.aespa-member { 
/* list의 처음과 끝을 동일한 요소를 넣어주면 끊기는 것을 피할 수 있다. */
    position: relative;
    height: 100px;
    overflow: hidden;
}
.aespa-member-list { animation: ani 3s infinite; }

<div class="aespa">
    aespa
    <div class="aespa-member">
        <ul class="aespa-member-list">
            <li>Karina</li>
            <li>Giselle</li>
            <li>Winter</li>
            <li>Ningning</li>
            <li>Karina</li>
        </ul>
    </div>
    <h2 class="song-title">Savage</h2>
</div>

2-2. Jungle Cinema実装

3.感じ