CSS animations

preface

Using CSS to achieve a lot of animation, is a very loaded thing, so must learn! In this article, we share some interesting and quick animation cases combining the contents of the booklet and online learning materials.

Transition is used to transition properties from one state to another. Animation allows nodes to have more states and more wonderful interaction effects. Transform is used to rotate, scale, translate, perspective, or skew elements.

One, pure CSS click will roll round animation

To achieve the effect of clicking on a circle, you can use the selectors :active and animation-play-state.

Click on the glass to trigger the selector: Active. Animation-play-state specifies whether the animation is running or paused. The value can be running or pause.

Note that in circle pan scrolling, translate is placed in front of rotate. Because the circle is actually a clipped square, the rotation will cause transform-Origin to change relative to the page.

<div class="wrap">
  <div class="circle"></div>
  <div class="line"></div>
</div>
Copy the code

/* Show only the core code */
.circle {
  animation: scroll 5s ease-in alternate infinite;
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    transform: translateX(200px) rotate(360deg); }}.line {
  animation: addline 5s ease-in alternate infinite;
  animation-play-state: paused;
}
@keyframes addline {
  0% {
    width: 0;
  }

  100% {
    width: 200px; }}.wrap:active {
  .circle..line {
    animation-play-state: running; }}Copy the code

Hover text appears to underline animation

The scale of the transform is used to set the X-axis to 0 so that the underline is not visible at first. Transform: Scale3D (1, 1, 1) reverts to normal scale over mouse. Add the Transition animation.

/* Show only the core code */
.line::after {
  content: "";
  display: block;
  width: 100%;
  background: currentColor;
  transition: all 0.3 s ease-in-out;
  transform: scale3d(0.1.1);
}
.line:hover::after {
  transform: scale3d(1.1.1);
}
Copy the code

Three, transition animation

Using Mark defined in SVG as a mask, it is easy to animate arbitrary shapes.

/* Show only the core code */
.img {
  mask: url(".. /assets/images/star.svg") no-repeat center;
  mask-size: 300% 300%;
  animation: maskStarIn 1s infinite alternate;
}
@keyframes maskStarIn {
  from {
    mask-size: 0 0;
  }
  to {
    mask-size: 300% 300%; }}Copy the code

conclusion

Simple animations are individual property changes and are not difficult to implement. And complex animation, in fact, is also composed of a simple animation, then do not feel difficult, good things take time, patience to achieve.

• References:
  • Play with the artistic beauty of CSS
  • Table of slow functions
  • How to draw a better animation experience?

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event.