Is it possible to create animated counter using keyframes by changing element content?
As example:
.loop:before{ animation: loop 10s linear; } @keyframes loop { 0% { content: '0'; } 10% { content: '10'; } 20% { content: '20'; } 30% { content: '30'; } 40% { content: '40'; } 50% { content: '50'; } 60% { content: '60'; } 70% { content: '70'; } 80% { content: '80'; } 90% { content: '90'; } } In case it's impossible, is there a way to do it with HTML/CSS, without javascript?
The content property is not manipulatable through @keyframes or transition, however there is a way you could do this by using a :pseudo-element with text 0 10 20 30 40 50 60 70 80 90 and animating its margin-top property.
div { position: relative; width: 20px; height: 20px; border: 1px solid black; overflow: hidden; } div:after { content: attr(data-val); position: absolute; top: 0; left: 0; line-height: 20px; text-align: center; -webkit-animation: loop 10s linear; animation: loop 10s linear; } @-webkit-keyframes loop { 0% { margin-top: 0px; } 9% { margin-top: 0px; } 10% { margin-top: -20px; } 19% { margin-top: -20px; } 20% { margin-top: -40px; } 29% { margin-top: -40px; } 30% { margin-top: -60px; } 39% { margin-top: -60px; } 40% { margin-top: -80px; } 49% { margin-top: -80px; } 50% { margin-top: -100px; } 59% { margin-top: -100px; } 60% { margin-top: -120px; } 69% { margin-top: -120px; } 70% { margin-top: -140px; } 79% { margin-top: -140px; } 80% { margin-top: -160px; } 89% { margin-top: -160px; } 90% { margin-top: -180px; } 99% { margin-top: -180px; } 100% { margin-top: -200px; } } @keyframes loop { 0% { margin-top: 0px; } 9% { margin-top: 0px; } 10% { margin-top: -20px; } 19% { margin-top: -20px; } 20% { margin-top: -40px; } 29% { margin-top: -40px; } 30% { margin-top: -60px; } 39% { margin-top: -60px; } 40% { margin-top: -80px; } 49% { margin-top: -80px; } 50% { margin-top: -100px; } 59% { margin-top: -100px; } 60% { margin-top: -120px; } 69% { margin-top: -120px; } 70% { margin-top: -140px; } 79% { margin-top: -140px; } 80% { margin-top: -160px; } 89% { margin-top: -160px; } 90% { margin-top: -180px; } 99% { margin-top: -180px; } 100% { margin-top: -200px; } }<div class="loop" data-val="0 10 20 30 40 50 60 70 80 90"></div>
Answering late, there is idea to use counter in this case:
.test { position: relative; height: 20px; overflow: hidden; } .test::before { position: absolute; top: 100%; content: counter(before); animation: beforeCount 10s linear infinite, move 2s linear infinite; } .test::after { position: absolute; top: 100%; content: counter(after); animation: afterCount 10s -0.1s linear infinite, move 2s 1s linear infinite; } @-moz-keyframes beforeCount { 0% { counter-increment: before 0; } 10% { counter-increment: before 10; } 20% { counter-increment: before 20; } 30% { counter-increment: before 30; } 40% { counter-increment: before 40; } 50% { counter-increment: before 50; } 60% { counter-increment: before 60; } 70% { counter-increment: before 70; } 80% { counter-increment: before 80; } 90% { counter-increment: before 90; } } @-webkit-keyframes beforeCount { 0% { counter-increment: before 0; } 10% { counter-increment: before 10; } 20% { counter-increment: before 20; } 30% { counter-increment: before 30; } 40% { counter-increment: before 40; } 50% { counter-increment: before 50; } 60% { counter-increment: before 60; } 70% { counter-increment: before 70; } 80% { counter-increment: before 80; } 90% { counter-increment: before 90; } } @-o-keyframes beforeCount { 0% { counter-increment: before 0; } 10% { counter-increment: before 10; } 20% { counter-increment: before 20; } 30% { counter-increment: before 30; } 40% { counter-increment: before 40; } 50% { counter-increment: before 50; } 60% { counter-increment: before 60; } 70% { counter-increment: before 70; } 80% { counter-increment: before 80; } 90% { counter-increment: before 90; } } @keyframes beforeCount { 0% { counter-increment: before 0; } 10% { counter-increment: before 10; } 20% { counter-increment: before 20; } 30% { counter-increment: before 30; } 40% { counter-increment: before 40; } 50% { counter-increment: before 50; } 60% { counter-increment: before 60; } 70% { counter-increment: before 70; } 80% { counter-increment: before 80; } 90% { counter-increment: before 90; } } @-moz-keyframes afterCount { 0% { counter-increment: after 0; } 10% { counter-increment: after 10; } 20% { counter-increment: after 20; } 30% { counter-increment: after 30; } 40% { counter-increment: after 40; } 50% { counter-increment: after 50; } 60% { counter-increment: after 60; } 70% { counter-increment: after 70; } 80% { counter-increment: after 80; } 90% { counter-increment: after 90; } } @-webkit-keyframes afterCount { 0% { counter-increment: after 0; } 10% { counter-increment: after 10; } 20% { counter-increment: after 20; } 30% { counter-increment: after 30; } 40% { counter-increment: after 40; } 50% { counter-increment: after 50; } 60% { counter-increment: after 60; } 70% { counter-increment: after 70; } 80% { counter-increment: after 80; } 90% { counter-increment: after 90; } } @-o-keyframes afterCount { 0% { counter-increment: after 0; } 10% { counter-increment: after 10; } 20% { counter-increment: after 20; } 30% { counter-increment: after 30; } 40% { counter-increment: after 40; } 50% { counter-increment: after 50; } 60% { counter-increment: after 60; } 70% { counter-increment: after 70; } 80% { counter-increment: after 80; } 90% { counter-increment: after 90; } } @keyframes afterCount { 0% { counter-increment: after 0; } 10% { counter-increment: after 10; } 20% { counter-increment: after 20; } 30% { counter-increment: after 30; } 40% { counter-increment: after 40; } 50% { counter-increment: after 50; } 60% { counter-increment: after 60; } 70% { counter-increment: after 70; } 80% { counter-increment: after 80; } 90% { counter-increment: after 90; } } @-moz-keyframes move { 0% { top: 120%; } 100% { top: -120%; } } @-webkit-keyframes move { 0% { top: 120%; } 100% { top: -120%; } } @-o-keyframes move { 0% { top: 120%; } 100% { top: -120%; } } @keyframes move { 0% { top: 120%; } 100% { top: -120%; } }<div class="test"></div>stylus source is the following
.test position relative height 20px overflow hidden .test::before position absolute top 100% content counter(before) animation beforeCount 10s linear infinite, move 2s linear infinite .test::after position absolute top 100% content counter(after) animation afterCount 10s -0.1s linear infinite, move 2s 1s linear infinite @keyframes beforeCount for i in (0..9) {10% * i} counter-increment before (i * 10) @keyframes afterCount for i in (0..9) {10% * i} counter-increment after (i * 10) @keyframes move 0% top 120% 100% top -120% I'm afraid that is not possible, according to w3c the content property is not animatable. But you can do something like this:
Maybe it is not the best solution, but it is another one, Just specify a delay in the fourth parameter of the animation of each element
ul li{ margin: 0; padding: 0; list-style: none; } .loop{ opacity: 0; position: absolute; } ul li.loop:nth-child(1){ -webkit-animation: loop 1s linear 0s; animation: loop 1s linear 0s; } ul li.loop:nth-child(2){ -webkit-animation: loop 1s linear 1s; animation: loop 1s linear 1s; } ul li.loop:nth-child(3){ -webkit-animation: loop 1s linear 2s; animation: loop 1s linear 2s; } ul li.loop:nth-child(4){ -webkit-animation: loop 1s linear 3s; animation: loop 1s linear 3s; } ul li.loop:nth-child(5){ -webkit-animation: loop 1s linear 4s; animation: loop 1s linear 4s; } ul li.loop:nth-child(6){ -webkit-animation: loop 1s linear 5s; animation: loop 1s linear 5s; } @-webkit-keyframes loop { to{opacity:1} } @keyframes loop { to{opacity:1} }<ul> <li class="loop">00</li> <li class="loop">01</li> <li class="loop">02</li> <li class="loop">03</li> <li class="loop">04</li> <li class="loop">05</li> </ul>