Custom Counter Tips! CSS implements long press and like cumulative animation

Welcome to my public account: front-end detective

In an APP, if you long press and like, there will be such a fancy animation, as follows

This animation consists of two parts. The implementation of this random expression can refer to this article by coco. Using transition to achieve short video APP like animation

It's similar, so I won't repeat it here. What we want to achieve here is this constantly changing digital animation, as shown below

Carefully observe, there are mainly the following interactions

1. There is an upward animation when the mouse is pressed, and it slowly disappears when lifted
2. The numbers keep adding up
3. The prompt text changes automatically when it reaches a specified value, encourage! > Come on!! > Awesome!!!

Let's see how it is achieved

1. Mouse press and lift interaction

Using pseudo-elements can make HTML concise and flexible enough, such as HTML as follows

 <button class="like">长按点赞</button>

Use pseudo-elements to implement prompt copy, simply modify it

 .like{
  position: relative;
}
.like::after{
  position: absolute;
  bottom: 100%;
  width: max-content;
  font-size: 2rem;
  font-style: italic;
  font-weight: bolder;
  background-image: linear-gradient(#FFCF02, #FF7352);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content:'x10';
}

The effect is as follows

Then, we need to hide this prompt by default and only appear when pressed

 .like::after{
  /**/
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.like:active::after{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

In this way, it is easy to realize an animation that appears upward when pressed, and restored when lifted.

However, such an animation does not look very comfortable, so how to change the rewind animation when lifting? It's very simple, set the transition animation that appears upward to :active , and add a delay to ensure that the displacement animation is restored after the element disappears

For this animation technique, you can refer to my previous article CSS to achieve the routine of button click animation

 .like::after{
  /**/
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: .3s .3s, 0s .6s transform; /*默认情况下没有transform*/
}
.like:active::after{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: .3s;
}

The effect is as follows

2. The numbers keep accumulating

Let's take a look at CSS number changes.

This trick has been covered in both articles before: Are you still using timers? CSS can also implement electronic clocks and animation synthesis tips! CSS to achieve dynamic countdown effect

In the past, changes in numbers may require creating multiple labels and then changing the displacement to achieve

 <div>
    <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>...</span>
</div>

This method requires the creation of multiple tags, which is slightly cumbersome, not easy to expand, and can not be used in pseudo-elements .

But now there is a more concise way to do it, and that is CSS @property . What is this for? To put it simply, you can customize the properties. In this example, you can make the numbers transition and animate like colors . You may not understand much. Just look at the example.

We first render the numbers to the page through CSS variables, here we need to use the counter

If you are interested, you can refer to this article: Tips: How to display CSS var variable values with the help of the content attribute

 .like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
}

In order to facilitate the test, first set the prompt to be visible here, the effect is as follows

How to make this number change? Can use CSS animation, change --t to 999

 @keyframes count {
    to {
        --t: 999
    }
}
.like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
  animation: count 100s steps(999) forwards;
}

The effect is as follows

However, there is no animation. In fact, you need to wait for 100s to change directly to 999 88d1cfbfcbaa180dc653ad4584bbd0b7--- later. Then the most important step comes, add the following custom properties

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

Yes, just add this little piece of CSS and the animation will come out

Isn't it amazing? It can be understood that, after being defined by @property , this variable --t can be animated separately, just like the color change.

Then, we need to realize that the animation will only appear when it is pressed. The animation can be paused by default and only run when it is pressed.

 .like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
  animation: count 100s steps(999) forwards;
  animation-play-state: paused; /*默认暂停*/
}

.like:active::after{
  /**/
  animation-play-state: running; /*按下运行*/
}

Now see the effect

3. The stage change of prompt

Prompt that there is a staged change in the process of accumulating numbers, as follows

1. 0~20 : Encouragement!
2. 20~50 : Come on!!
3. 50~ : Awesome!!!

So, how do you automatically map different hints based on CSS variables? Custom counters can be used here, for example, we first customize a counter

 @counter-style 鼓励 {
  system: cyclic;
  symbols: '鼓励！';
  range: 1 20;
}

This defines a counter named "encouragement". To explain briefly, system means the computing system, here is cyclic , means to recycle a set of characters provided by the developer, character Defined by symbos . Then symbos represents the calculation symbol, that is, the character displayed in detail, which is specified here as 鼓励! . Then there is a range attribute, indicating the range of the counter, which is specified here as 1 20 . The indication is as follows

The content of this part of the custom counter is relatively complex and relatively new. If you are interested, you can refer to this article by Zhang Xinxu: CSS @counter-style rules in detail

Then this custom counter is also rendered through pseudo elements

 .like::after{
  content: counter(time)  counter(time, 鼓励);
}

See the effect below

It can be seen that when the count is within the range of 1~20 , the custom character "encourage!" is rendered. When it exceeds this range, it becomes a normal number , so we need to do a "fallback" ” processing, that is, rules outside this interval, CSS counters also provide such a capability, named fallback , the implementation is like this

 @counter-style 鼓励 {
  system: cyclic;
  symbols: '鼓励！';
  range: 1 20;
  fallback: 加油
}
@counter-style 加油 {
  system: cyclic;
  symbols: '加油！！';
  range: 21 50;
  fallback: 太棒了
}
@counter-style 太棒了 {
  system: cyclic;
  symbols: '太棒了！！！';
  range: 51 infinite;
}

I believe it should be easier to understand. When the counter range exceeds, it will continue to execute according to the counting rules of fallback , which can be infinitely nested. The above can be simplified a little, and the interval can be more flexible. , for example, in the interval of 加油 , when you enter this counter, the starting point must have exceeded 20, so you can also change the starting point to 0 , simplified as follows

 @counter-style 鼓励 {
  system: cyclic;
  symbols: '鼓励！';
  range: 0 20;
  fallback: 加油
}
@counter-style 加油 {
  system: cyclic;
  symbols: '加油！！';
  range: 0 50; /*进入到这个计数器，起点肯定已经超过了20*/
  fallback: 太棒了
}
@counter-style 太棒了 {
  system: cyclic;
  symbols: '太棒了！！！';
}

The indication is as follows

This gives the demonstration effect at the beginning of the article

The full code can be accessed at: CSS add num animation (runjs.work)

RunJS , front-end code creation and sharing online.

Fourth, to summarize

The above is all the content, not bad animation skills, have you learned it? Summarize below

1. The transition animation of mouse down and up is usually the opposite, but you can change the up animation by setting transition when it is pressed
2. The accumulation of numbers can be achieved with the help of @property , which can make CSS variables transition or animate like colors
3. Counters allow CSS variables to be rendered on pseudo-elements
4. animation-play-state can realize the effect of pressing the animation to start and lifting the animation to pause
5. Custom counters can render certain characters within a specified count range
6. To achieve the stage change of the count, you can use fallback to roll back, you can jump to another counter
7. To mention the compatibility, Chrome 91+ , it is not suitable for external use at present, but you can know in advance

Of course, the potential of custom counters is far more than that, and there will be more mining and applications in the future. Finally, if you think it's good and helpful to you, please like, bookmark, and forward ❤❤❤

Welcome to my public account: front-end detective