Recently, Ant Design has been widely used in the project, which is very good. I don’t know if you have found such an effect. On the official website, if the mouse is placed on the Logo, the icon on the letter I will keep changing. After leaving, it will stop and change again.

However, it is not surprising that I did not find it, because this effect is implemented by JS, and must wait for the completion of loading to take effect, and the official website is sometimes particularly slow, such as this is still loading, most of the probability is not the above hover effect

Well, on second thought, this effect can be done with pure CSS, the implementation cost is low, and can effectively avoid the above loading problems, let’s have a look

1. Implementation principle of THE CSS

The whole implementation principle is roughly as follows

  1. Prepare a material that contains all the smaller ICONS
  2. Create a frame-by-frame CSS animation that changes the background position
  3. Hover to control animation operation through the mouse

Two, material preparation

To avoid multiple requests, and to make it easier to create animations, I’ve grouped all the small ICONS together (saved from the official website), just like the old Sprite image, as shown below

Suppose the HTML structure looks like this

<h1 class="logo">Ant Design</h1>
Copy the code

For better semantics, it is recommended to keep the text here and hide the text in other ways (such as transparency). You can use the logo as the background image, and then create small mutable ICONS with fake elements (decorative elements can be generated with fake elements to keep the HTML clean). CSS is shown below

.logo{
  width: 500px;
  height: 100px;
  position: relative;
  color: transparent;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg') center/contain no-repeat;
  cursor: pointer;
}
.logo::after{
  content: ' ';
  position: absolute;
  width: 32px;
  height: 32px;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg') 0 / cover no-repeat;
  right: 113px;
  top: -18px;
}
Copy the code

So we have a static layout

Second, CSS frame by frame animation

Next comes animation, which can be animated frame by frame by using the steps() function in the CSS animation function

Define a keyframe and change the background position

@keyframes random {
  to {
    background-position: 100%; }}Copy the code

There are 11 small ICONS that change by 10 steps, so the animation Settings are as follows

.logo::after{
	/* Other styles */
  animation: random 1s steps(10) infinite;
}
Copy the code

The result is an infinite loop of frame-by-frame animation

Pause and run CSS animation

By default, CSS animations run by default, but the current requirement is that only the mouse hover works.

There may be students who will do this. By default, no animation is created when hover is created, as shown below

.logo::after{
	/* Default no animation */
}
.logo:hover::after{
  animation: random 1s steps(10) infinite;
}
Copy the code

But there are two problems with this:

  1. Each time you create an animation in real time there is more performance drain
  2. The position is restored to its original state each time the mouse leaves

Therefore, this approach is not desirable

In addition to controlling the animation in the above way, animation-play-state can also be used to actively set the pause, as shown below

.logo::after{
	/* Other styles */
  animation: random 1s steps(10) infinite;
  animation-play-state: paused; /* Animation pause */
}
Copy the code

In this way, the default will not move, and then “run” when hover

.logo:hover::after{
  animation-play-state: running; /* Animation run */
}
Copy the code

Results the following

4. Specify the initial position

Now the default is that the small icon is the first, if you want to specify another one like ❤

How to deal with this situation

First we thought we could just manually change the background position, ❤ in number 8, so

.logo::after{
  /* Other styles */
  background-position: -224px; /* 32 * 7 */
}
Copy the code

Results the following

In this way, there are more problems. Because the starting position of the animation is changed, the animation moves from the 8th place to the most right, and the left part is not passed through. Step also needs to be adjusted.

In addition to this approach, animation can also be achieved through “negative delay”, adding a negative delay to the animation, the animation will move forward to the future location.

For example, if you want to specify the position of future frame 7, you can delay the negative 7/10 of the total motion time as follows

.logo::after{
  /* Other styles */
  animation-delay: -.7s; /* 7 / 10 * 1s*/
}
Copy the code

This will not affect the original animation, perfect implementation

The full code can be accessed: Ant Design Logo (codepen.io)

Complete code attached (Codepen seems to be a bit unstable lately)

.logo{
  width: 500px;
  height: 100px;
  position: relative;
  color: transparent;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg') center/contain no-repeat;
  cursor: pointer;
}
.logo::after{
  content: ' ';
  position: absolute;
  width: 32px;
  height: 32px;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg') 0 / cover no-repeat;
  right: 113px;
  top: -18px;
  animation: random 1s -.7s steps(10) infinite;
  animation-play-state: paused;
}
.logo:hover::after{
  animation-play-state: running;
}
@keyframes random {
  to {
    background-position: 100%; }}Copy the code

V. Summary and explanation

The above is the CSS implementation for Ant Design official website Logo effect. The amount of code is very small, but also avoids the problem of js loading is not complete, and the experience is better. Here is a brief summary

  1. CSS rendering is timely and does not affect CSS interaction as long as the page is visible
  2. Frame-by-frame animation can be implemented through the step() function in CSS animation
  3. CSS animations can run automatically or be paused manually
  4. You can make CSS animations run ahead of time by setting a negative delay

Of course, CSS’s advantages don’t end there. When I opened the Ant Design console, I was a bit overwhelmed by the fact that THE SVG link was constantly changed. If I kept it on the Logo, I would get endless requests for images and small ICONS would “blink”

The number of requests is a bit surprising. If someone in charge of Ant Design’s official website sees this, can you optimize it?

Finally, if you think it’s good and helpful, please like, bookmark and retweet ❤❤❤