Tips for using CSS Animation: State Jumping, Negative Delays, Animating Origin, …

Tram Ho

Surely CSS Animation is no stranger to any Frontend Dev, today I will introduce some tricks when using css animation that not everyone knows.

Toggle between animations

CSS animation makes it easy to convert properties to a new value over time. It also has the ability to convert properties to a new value almost instantly. The trick is to use two keyframes with a very small change, about 0.001%.

For example:

Animation sound delays

A positive animation delay is an animation that waits a certain amount of time to begin. A negative animation delay starts the animation immediately, as if the amount of time delay has passed. In other words, start the animation in the next state of the animation cycle. This allows animations to be reused across multiple elements with just a change of time.

Here is an example:

Animations proportional

One way to keep responsive with frames as smoothly and quickly as possible is to use percentages and other units instead of the fixed set. The following example can create a wave effect using percent width, zero height and percent percent.

Change transfrom-origin between animation

In the example below, you will see we have created an animation using rotations on different axes instead of using four separate animations.

The downside of this trick is that you can’t use animation-mode: forwards; for only part of the animations. This means that we must redefine the equivalent of its state before applying transformation-origin.

Negative Transform-origins

Negative Transform-origin is useful for creating circle moving animations. Instead of assigning specific translate and rotation values ​​with an element to create a circular animation, we can do it more simply by using negative transform-origin values ​​in addition to the second element or pseudo. -element (an element if we want the element to rotate as well as move in a circle). By using different values ​​of the negative transform-origin source, we can reuse the same animation for multiple elements while keeping circular motion for each element.

Animation using box shadow

Try the example below

Because box-shadow is not used%, it will be difficult to be responsive, if you want to resize the animation, you can use transform: scale (n).

Use pseudo-elements

Similar to box-shadow, pseudo-elements can be used to add more content to the appearance of an element. They can have their own animation effects, box-shadow effects inherited from the parent elements.

Check out at:

Share the news now

Source : Viblo