This is the 16th day of my participation in the More text Challenge. For more details, see more text Challenge

Scintillation effect

problem

A common user experience design technique is to flash several times (no more than three times) to indicate that somewhere in the user interface has changed, or to highlight the target of the current link (if the ID of an element on the page matches the #hash in the URL, it is the target of the link). Flashing in this type of scenario is an effective way to direct the user’s attention to a specific area.

The solution

CSS animation allows you to create various flickering effects, such as flashing the entire element (via the opacity property), flashing the color of the text (via the color property), flashing the border (via the border-color property), and so on. Only the flicker effect of text is discussed, as this is the most common requirement. However, the same applies to the scintillating effects of other parts of the element.

A smooth flicker effect.

@keyframes blink-smooth {
  to {
    color: transparent
  }
}

.highlight {
  animation: 1s blink-smooth 3;
}
Copy the code

It mostly worked. The text fades smoothly from its original color to transparent color, but then abruptly jumps back to its original color. This may be exactly the effect we had in mind. If that’s the case, then we’re done! But if we want the color changes of text to not only be smooth and invisible, but also smooth and visible. You can then modify the keyframes so that the state switch occurs in the middle of each cycle.

@keyframes blink-smooth { 50% { color: transparent } }
.highlight {
  margin: 30px;
  animation: 1s blink-smooth 3;
}
Copy the code

There is a problem, although in this particular animation is not obvious, because the transition of color or transparency is difficult to reflect various speed function characteristics), but: this animation has always been in accelerating process, both appeared in the text and to — it for some animation may appear less natural (such as pulse like animation). In that case, another magic weapon can be pulled from the toolbox: animation-direction.

The only function of animation-direction is to reverse each cycle (reverse), either the even cycle (alternate), or the odd cycle (alternate-reverse). The great thing about it is that it reverses the adjustment function at the same time to create a more realistic animation. We can use it for elements that need to flicker, such as:

@keyframes blink-smooth { to { color: transparent } }
.highlight {
  animation:.5s blink-smooth 6 alternate;
}
Copy the code

So, the most common flicker effect can be achieved using step.

@keyframes blink {
  50% {
    color: transparent
  }
}

.highlight {
  animation: 1s blink 3 steps(1); /* or use step-end */
}
Copy the code

Type of animation

problem

Sometimes we want the characters in a piece of text to appear one by one, simulating the effect of typing. This effect is particularly popular on technical websites, where the uniform width font can create the feel of a terminal command line. When used properly, it can really elevate the design of an entire web page.

The solution

The core idea is to make the width of the container the body of the animation, wrap all the text in the container, and then let the width of the container start from 0 and expand word by word in a step-by-step animation to its proper width. However, this approach is limited in that it does not work with multiline text. Fortunately, this usually applies to header – like but – line text. Also, be aware that the longer the animation lasts, the worse the animation will be.

To apply the animation to h1, the code structure is:

<h1>This is a title to implement typing animation</h1>Add the animation and change its width from 0 to full width. @keyframes typing { from { width: 0 } } h1 { width: 14em; animation: typing 8s; }Copy the code

However, we see that this effect has nothing to do with the desired typing effect. First, forget white-space:nowrap; To prevent text from folding, so the number of lines of text changes as the width expands. Overflow: hidden; So any text that goes beyond the width is not cropped out. After fixing these two problems, the effect is as follows:

After fixing these two minor issues, the real big ones came out:

  • The most obvious thing is that the animation is smooth and coherent, rather than word-for-word.
  • In addition, how to calculate the width of h1.

Fixing the first problem with steps(), as in “frame-by-frame animation” and “flicker effects,” the number of steps required is determined by the number of characters, which is obviously difficult to maintain, and even harder for dynamic text. The width of h1 is taken as the number of characters, since we are using Chinese characters, the unit is em

According to the above modification:

@keyframes typing {
  from { width: 0; }}h1 {
  width: 14em; /* The width of the text */
  overflow: hidden;
  white-space: nowrap;
  animation: typing 6s steps(15);
}
Copy the code

The highlight is to add a blinking cursor to it. You can use pseudo-elements to create the cursor and use the opacity to achieve the blinking effect. You can also use the right border to simulate the cursor effect, and you can save limited pseudo-element resources for other uses:

@keyframes typing {
  from { width: 0}}@keyframes caret {
  50% { border-color: transparent; }}h1 {
  width: 14em; /* The width of the text */
  overflow: hidden;
  white-space: nowrap;
  border-right:.05em solid;
  animation: typing 6s steps(15),
    caret 1s steps(1) infinite;
}
Copy the code

State smooth animation

problem

Not all animations play as soon as the page loads. More commonly, animations are used in response to user actions, such as hovering over an element (:hover) or holding down a mouse key (: Enter). In this scenario, there is no control over how many times the animation actually loops. For example, a user’s mouse might trigger a gorgeous :hover animation, in which the mouse is removed from the element before the animation is over. In this case, the animation stops playing immediately and jumps back to the start. It’s a blunt user experience.

The solution

Suppose you have a very long, wide-format photo, but only a 150-by-150 area shows it. Create an animation: By default, the left edge of the photo is displayed, and as the user interacts with it, it scrolls and leaks the rest. Displays the photo using an element.

.panoramic {
  width: 150px;
  height: 150px;
  background: url("22.jpg");
  background-size: auto 100%;
}
Copy the code

Try animating it. When you change the background-position value from 0 to 100% 0, the image will scroll from left to right.

@keyframes panoramic {
  to {
    background-position: 100% 0; }}.panoramic {
  width: 150px;
  height: 150px;
  background: url("22.jpg");
  background-size: auto 100%;
  animation: panoramic 10s linear infinite alternate;
}
Copy the code

This animation is triggered as soon as the page loads and is changed to play when the user hovers over the mouse.

.panoramic:hover..panoramic:focus {
  animation: panoramic 10s linear infinite alternate;
}
Copy the code

However, when the user mouse away, they will see the image suddenly return to the far left. In order to solve this problem, we need to think about the problem from another Angle. What may be needed is not to apply an animation when :hover, but to pause the animation when the :hover state is lost. You can use the animation-play-State property.

You need to add the animation to the.panoramic style but make it suspended from the start until :hover. It’s no longer a matter of adding and canceling animations, it’s just a matter of pausing and continuing an animation that has always been there, so there are no more abrupt jumps back.

@keyframes panoramic {
  to {
    background-position: 100% 0; }}.panoramic {
  width: 150px;
  height: 150px;
  background: url("22.jpg");
  background-size: auto 100%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}

.panoramic:hover..panoramic:focus {
  animation-play-state: running;
}
Copy the code

One last word

If this article is helpful to you, or inspired, please pay attention to it. Your support is the biggest motivation for me to keep writing. Thank you for your support.