CODEWITHSUNDEEP
htmlcsscss-animations
A. Meshu
A. Meshu

Reputation: 4148

simple dice roll effect - css animation

i'm trying to make simple dice roll effect using HTML symbols. how can i repeat that animation?

  1. I don't want to use JS - is it possible?
  2. I know i can put it on iframe element and refresh it after 6 sec etc.

looking for simple css solution that i miss.

css part:

.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;}
}

and this is the 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>

Upvotes: 3

Views: 6785

Answers (1)

andfra
andfra

Reputation: 163

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

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

@keyframes rolling {
  0% {content:'\2680';}
  16.7% {content:'\2681';}
  33.4% {content:'\2682';}
  51.1% {content:'\2683';}
  67.8% {content:'\2684';}
  84.5% {content:'\2685';}
  100% {content:'\2685';}
}
  <span class="dice"></span>

This will be OK for you?

Upvotes: 4

Related Questions