未分類

<section class="scroll">
	<div class="first">
		テキスト1　　テキスト2　　テキスト3　　テキスト4　　テキスト5
	</div>
	<div class="last">
		テキスト1　　テキスト2　　テキスト3　　テキスト4　　テキスト5　
	</div>
</section>

.scroll {
    display: flex;
    overflow: hidden;
}

.scroll .first,
.scroll .last {
    flex-shrink: 0;
    width: auto;
    height: auto;
    display: inline-block;
    text-wrap: nowrap;
    white-space: nowrap;
}

.scroll .first {
    animation: ani-first 10s infinite linear 0.1s both;
}

.scroll .last {
    animation: ani-last 10s infinite linear 0.1s both;
}

@keyframes ani-first {
    0% {
        transform: translateX(0%);
    }

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

@keyframes ani-last {
    0% {
        transform: translateX(0%);
    }

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