3
\$\begingroup\$

I just made a little experiment on codepen with this animation.

But I get some performance issues: sometimes it's not as smooth as it should be.

Does someone know some practice I could use to improve it?

@import url("https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer");
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: white;
  overflow: hidden;
}

#poem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

p {
  font-family: "IM Fell Great Primer", serif;
  font-size: 15px;
  letter-spacing: 0.1pt;
  word-spacing: 1pt;
  line-height: 1;
  padding: 0 20px;
}

#ravens-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  *width: 100%;
  *height: 100%;
  *border: solid 1px black;
  will-change: transform;
  animation: turn 20s linear infinite;
}

.ravens {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px;
  width: 100px;
  height: 100px;
  *border: dotted 1px black;
  background: url("https://image.noelshack.com/fichiers/2017/42/2/1508268549-crow-sprite.jpg") left center;
  animation: sprite 0.7s steps(4) infinite;
  transform: rotate(var(--a, 0deg)) translateY(-220px);
}
.ravens:nth-child(2) {
  --a: 30deg;
}
.ravens:nth-child(3) {
  --a: 60deg;
}
.ravens:nth-child(4) {
  --a: 90deg;
}
.ravens:nth-child(5) {
  --a: 120deg;
}
.ravens:nth-child(6) {
  --a: 150deg;
}
.ravens:nth-child(7) {
  --a: 180deg;
}
.ravens:nth-child(8) {
  --a: 210deg;
}
.ravens:nth-child(9) {
  --a: 240deg;
}
.ravens:nth-child(10) {
  --a: 270deg;
}
.ravens:nth-child(11) {
  --a: 300deg;
}
.ravens:nth-child(12) {
  --a: 330deg;
}

@keyframes sprite {
  100% {
    background-position: -400px;
  }
}
@keyframes turn {
  100% {
    transform: rotate(360deg);
  }
}
<div id="poem">
  <div id="ravens-circle">
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
    <div class="ravens"></div>
  </div>
  <p>Huginn and Muginn</p>
  <p>Ravens black</br>On wings of night</br>Nine worlds circled</br>In their flight</p>
  <p>One-eyed Father</br>Hears their call-</br>Tidings brought</br>To Asgard's hall. </p>
  <p>Thought as fast</br>As lightning's flash.</br>Mem'ry old</br>As sacred Ash. </p>
  <p>Huginn and Muninn</br>See and hear.</br>Whisper all</br>In Odin's ear.</p>
</div>

\$\endgroup\$
2
  • \$\begingroup\$ In which browser(s) and on which platform do you have performance issues? I tried this in Safari, Chrome and Firefox on macOS and it was always very smooth. \$\endgroup\$ Commented Oct 18, 2017 at 17:59
  • \$\begingroup\$ I'm on chrome right now, it's smooth but every 5 seconds I've some frames dropping... I catched it with chrome dev tool perfomance section every 10 seconds it drop from more than 60 to less than 30 fps. \$\endgroup\$ Commented Oct 19, 2017 at 9:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.