Switch from hover effects to CSS3 animations triggered on page load

Question

Switch from hover effects to CSS3 animations triggered on page load

I found this code snippet on https://codepen.io/chriscoyier/pen/NWNJpdJ. Can someone help me modify it to change the counter on page load instead of hover? Also, I want the counter to stop at 100 without resetting back to 0.

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

div {
  transition: --num 5s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
}
div::after {
  content: counter(num);
}
div:hover {
  --num: 100;
}

body {
  margin: 2rem;
}

Hover the number.
<div></div>

html css

Answer 1

Answer №1

Here's a cool CSS trick you can try out:

div::after {
  font: 800 40px system-ui;
  content: counter(num);
  animation: counter 5s linear infinite alternate;
  counter-reset: count 0;
}

@keyframes counter {
  0% {
    counter-increment: count 0;
  }
  10% {
    counter-increment: count 1;
  }
  20% {
    counter-increment: count 2;
  }
  30% {
    counter-increment: count 3;
  }
  40% {
    counter-increment: count 4;
  }
  50% {
    counter-increment: count 5;
  }
  60% {
    counter-increment: count 6;
  }
  70% {
    counter-increment: count 7;
  }
  80% {
    counter-increment: count 8;
  }
  90% {
    counter-increment: count 9;
  }
  100% {
    counter-increment: count 10;
  }
}

Answer 2

Here's a cool CSS trick you can try out:

div::after {
  font: 800 40px system-ui;
  content: counter(num);
  animation: counter 5s linear infinite alternate;
  counter-reset: count 0;
}

@keyframes counter {
  0% {
    counter-increment: count 0;
  }
  10% {
    counter-increment: count 1;
  }
  20% {
    counter-increment: count 2;
  }
  30% {
    counter-increment: count 3;
  }
  40% {
    counter-increment: count 4;
  }
  50% {
    counter-increment: count 5;
  }
  60% {
    counter-increment: count 6;
  }
  70% {
    counter-increment: count 7;
  }
  80% {
    counter-increment: count 8;
  }
  90% {
    counter-increment: count 9;
  }
  100% {
    counter-increment: count 10;
  }
}

Answer 3

Answer №2

Give this a shot -

Markup

Counter
<div id="demo">0</div>

Style

#demo{  
font: 800 40px system-ui;
}  
body {
 margin: 2rem;
}

Functional Scripting

let x=0;
let c=setInterval(function() {
 document.getElementById("demo").innerHTML = x;        
 x++;  
 if(x==101)
  clearInterval(c);
},50);

Answer 4

Give this a shot -

Markup

Counter
<div id="demo">0</div>

Style

#demo{  
font: 800 40px system-ui;
}  
body {
 margin: 2rem;
}

Functional Scripting

let x=0;
let c=setInterval(function() {
 document.getElementById("demo").innerHTML = x;        
 x++;  
 if(x==101)
  clearInterval(c);
},50);

Switch from hover effects to CSS3 animations triggered on page load

Answer №1

Answer №2

Similar questions

What is the best way to retrieve the file and directory tree structure from git using php?

Tips on enlarging a webpage without showing the scroll bar on the main component

Incorporate this form created externally onto my website

Creating a new webpage that automatically populates with multiple images from a server using PHP

The .keypress() function isn't behaving as expected

Adjusting the size of <nav> element to accommodate its child elements

Styling the ::selection inline with CSS allows for custom

Color the text differently if the values are not the same (CSS and jQuery only)

Items in a pair of distinct columns

Styling columns alternately with CSS - an even-odd approach

Invoking the HTML method from a WCF service

Pressing the menu button will trigger a function that halts after the third click

Numeric input of 10 not recognized in the textbox

Dynamic SVG positioning

The battle between Typography and HTML formatting elements

What is the best way to deactivate a button when a certain input field is left blank?

How to make a HTML div background fill the entire page

SWI-Prolog and the Selection drop-down element in HTML

The information is not appearing in the dropdown menu

Attempting to apply two different animations to a single element