간단한 주사위 굴림 효과 - CSS 애니메이션

Question

나는 HTML 기호를 사용하여 간단한 주사위 굴리기 효과를 만들기 위해 노력하고 있습니다. 어떻게 그 애니메이션을 반복 할 수 있습니까?

1. JS를 사용하고 싶지 않습니다. 가능합니까?
2. 나는 내가 iframe 요소에 넣어 내가 그리워 간단한 CSS 솔루션을 찾고 등

6 초 후를 새로 고칠 수 있습니다 알고 있습니다.

CSS 부분 :

.dice { /* HTML symbols */ 
    font-size: 100px; 
    font-weight: 800; 
    position: fixed; 
    opacity: 0; 
} 
.dice:nth-child(1n) {animation: rolling 1s linear 1s 1 alternate;} 
.dice:nth-child(2n) {animation: rolling 1s linear 2s 1 alternate;} 
.dice:nth-child(3n) {animation: rolling 1s linear 3s 1 alternate;} 
.dice:nth-child(4n) {animation: rolling 1s linear 4s 1 alternate;} 
.dice:nth-child(5n) {animation: rolling 1s linear 5s 1 alternate;} 
.dice:nth-child(6n) {animation: rolling 1s linear 6s 1 alternate;} 
@-webkit-keyframes rolling { 
    0% {opacity: 0;} 
    50% {opacity: 1;} 
    100% {opacity: 0;} 
} 

이는 HTML입니다 :

<div class="roll"> 
    <span class="dice">&#9856;</span> 
    <span class="dice">&#9857;</span> 
    <span class="dice">&#9858;</span> 
    <span class="dice">&#9859;</span> 
    <span class="dice">&#9860;</span> 
    <span class="dice">&#9861;</span> 
</div> 

Answer 1

.dice { /* HTML symbols */ 
 
    font-size: 100px; 
 
    font-weight: 800; 
 
} 
 

 
.dice::after { 
 
    content:''; 
 
    animation: rolling 6s linear infinite; 
 
} 
 

 
@keyframes rolling { 
 
    0% {content:'\2680';} 
 
    20% {content:'\2681';} 
 
    40% {content:'\2682';} 
 
    60% {content:'\2683';} 
 
    80% {content:'\2684';} 
 
    100% {content:'\2685';} 
 
}

<span class="dice"></span>

이 당신을 위해 확인 될 것인가?