This is the 15th day of my participation in Gwen Challenge

Effect of slow

problem

Easing transitions and animations (such as transitions with bounces) is a popular way to make the interface more vivid and realistic.

Bounce animation

@keyframes bounce {
  60%.80%.to { transform: translateY(150px); }
  70% { transform: translateY(50px); }
  90% { transform: translateY(100px); }}.ball {
  /* Size style, color style, etc. */
  margin-left: 200px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
  animation: bounce 3s;
}
Copy the code

Either in the animation/transition shorthand property, or in the animation-timing-function /transition-timing-function expanded property, The default speed control function display can be specified as the ease keyword. In addition, there are four built-in slow curves that can be used to change the animation’s progression.

As you can see, ease-in and ease-out are reverse versions, and this combination is exactly what is needed to achieve the rebound effect: whenever the ball moves in opposite directions, the speed function is also opposite. You can specify a generic speed control function in the animation property and then override it as needed in keyframes.

@keyframes bounce1 {
  60%.80%.to {
    transform: translateY(200px);
    animation-timing-function: ease-out;
  }
  70% { transform: translateY(150px); }
  90% { transform: translateY(180px); }}.ball2 {
/* Write the rest of the styles here */
  margin-left: 400px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: green;
  animation: bounce1 3s ease-in;
}
Copy the code

Logically, you can get the reverse version of any speed control function by switching the horizontal and vertical coordinates of the control anchor point, which is also true for keywords; Each of the above five keywords has a corresponding value of the cubic- Bezier () form. For example, ease is equivalent to cubi-bezier (.25,.1,.25, 1), so the reverse version is cubi-Bezier (.1,.25, 1,.25). So you can change the rebound animation to:

@keyframes bounce2 {
  60%.80%.to {
    transform: translateY(200px);
    animation-timing-function: ease;
  }
  70% { transform: translateY(150px); }
  90% { transform: translateY(180px); }}.ball2 {
  /* Appearance style */
  margin-left: 100px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: blue;
  animation: bounce 3s cubic-bezier(.1.25.1.25);
}
Copy the code

The animation corresponding to the above three codes

Elastic transitional

There is a text box, and when it is focused, it needs to display a prompt box. This prompt box is used to provide the user with help information, such as the correct format of the field. The structure code is:

<style>
input {
  display: block;
  padding: 0 .4em;
  font: inherit;
}

.callout {	
  position: absolute;
  max-width: 14em;
  padding:.6em .8em;
  border-radius:.3em;
  margin:.3em 0 0 -.2em;
  background: #fed;
  border: 1px solid rgba(0.0.0.3);
  box-shadow:.05em .2em .6em rgba(0.0.0.2);
  font-size: 75%;
}

.callout:before {
  content: "";
  position: absolute;
  top: -.4em;
  left: 1em;
  padding:.35em;
  background: inherit;
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

input:not(:focus) + .callout {
  transform: scale(0);
}
.callout {
  transition:.5s transform;
  transform-origin: 1.4 em -.4em;
}
</style>

<input type="text" value="niuniu">
<span class="callout">Enter only letters, digits, underscores (_), and hyphens (-)</span>
Copy the code

The original transition effect

As you can see, there is currently a 1.5s transition when the user focuses on the text box, but if the end is more dramatic and natural (for example, expand to 110% size and then shrink back to 100%), you can use the animation learned above.

@keyframes elastic-grow {
  from { transform: scale(0); }
  70% {
    transform: scale(1.1);
    animation-timing-function:
    cubic-bezier(.1.25.1.25); /* Reverse ease */}}input:not(:focus) + .callout { transform: scale(0); }
input:focus + .callout { animation: elastic-grow .5s; }
.callout { transform-origin: 1.4 em -.4em; }
Copy the code

Use animation effects

Compared to the previous one, it did what it was supposed to do, but in this case, all that was needed was to add an elastic effect to the transition, and using animation was a bit overkill.

input:not(:focus) + .callout { transform: scale(0); }
.callout {
  transform-origin: 1.4 em -.4em;
  transition:.5s cubic-bezier(.25.1.3.1.5);
}
Copy the code

Effects achieved using transition code

However, finding that when the text box loses focus and the prompt retracts to disappear is not what we want. If you just want to specify the plain ease speed adjustment function for the prompt box’s closing process, you can override the current speed adjustment function in the CSS rule that defines the closing state:

input:not(:focus) + .callout {
  transform: scale(0);
  transition-timing-function: ease;
}
.callout {
  transform-origin: 1.4 em -.4em;
  transition:.5s cubic-bezier(.25.1.3.1.5);
}
Copy the code

Retract the normal transition

It’s a little slower to find out when it’s closed. To fix this, you can either override the transition-duration property alone, or override all values with the transition shorthand property. If you choose the latter, you do not need to specify ease explicitly because it is the initial value:

input:not(:focus) + .callout {
  transform: scale(0);
  transition:.25s;
}
.callout {
  transform-origin: 1.4 em -.4em;
  transition:.5s cubic-bezier(.25.1.3.1.5);
}
Copy the code

Close the transition without caton

To avoid accidentally setting elastic transitions to colors, try limiting transitions to a few specific properties rather than specifying nothing at all. The final perfect code is:

input:not(:focus) + .callout {
  transform: scale(0);
  transition:.25s transform;
}
.callout {
  transform-origin: 1.4 em -.4em;
  transition:.5s cubic-bezier(.25.1.3.1.5) transform;
}
Copy the code

Frame by frame animation

problem

In many cases, you need an animation that is difficult (or impossible) to implement only with transitions to certain CSS properties. Like a cartoon movie, or a complicated progress indicator. In this scenario, frame-by-frame animation based on pictures is the perfect choice; The question you might be asking is, “Can’t you animate a GIF?” For the most part, the answer is yes, and GIFs do the job perfectly. However, giFs do have a few drawbacks, and in some situations they can compromise the overall effect.

  1. The number of colors available for GIF images is limited to 256.
  2. GIF does not have Alpha transparency.
  3. You cannot modify certain parameters of an animation at the CSS level, such as the duration of the animation, the number of cycles, whether to pause, etc.

The solution

Place all the frames in the animation on a PNG, then use an element to hold the loading prompt and set its width and height to the size of a single frame:

<style>
.loader {
  width: 90px;
  height: 90px;
  background: url(loading.png) 0 0;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}
</style>
<div class="loader">Loading in...</div>
Copy the code

In contrast to the Bezier curve, Steps () splits the animation into frames based on the number of steps you specify and cuts the animation from frame to frame without any interpolation.

@keyframes loader {
  to { background-position: -1248px 0; }  /*1248px is the width of the image */
}

.loader{
  animation: loader 1s infinite steps(16); /* 16 is the number of frames */
}
Copy the code

Steps () also accepts an optional second argument, which can be start or end (the default). This parameter is used to specify at which point in each animation cycle frame switching occurs but is not used much. If we only need a single step switch effect, we can also use shorthand properties such as step-start and step-end, which are equivalent to steps(1, start) and steps(1, end) respectively.

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.