This is the 21st day of my participation in the August More Text Challenge

@keyframes

In CSS animation, there is an “explicit” animation technique that allows you to specify the animation effect directly in THE CSS using the KeyFrames attribute.

Declaring such animations with CSS is very simple. First, use @keyframes to describe the animation effect rules.

@keyframes bounce-in { 0% { transform: scale(0); } 50% {transform: scale(0.5); } 100% { transform: scale(1); }}Copy the code

Within the @Keyframes code block, there is a set of CSS rules called Keyframes. A keyFrame defines an animation style for a specific moment in a complete animation. The animation engine seamlessly transitions between styles. The above code defines a keyframes animation named bounce-in, which has three Keyframes representing the action scenes at each stage of the animation: One is the animation’s start state (” 0% “code block) intermediate state (” 50%” code block) and end state (” 100% “code block).

Once the animation is defined, we can associate it with the animation target element using animation-name.

.fade-enter-active { transform-origin: left center; animation: bounce-in 1s; } .fade-leave-active { transform-origin: left center; animation: bounce-in 1s reverse; } <transition name="fade" >< child V-if ="show"></child> </transitionCopy the code

For complex CSS animations can be implemented with the Animate. CSS library, saving efficiency and time costs.

The Animate. CSS library

Animate. CSS is an interesting, cross-browser CSS3 animation library.

The installation

Install using NPM:

$ npm install animate.css --save
Copy the code

Import it into your file:

import "animate.css"
Copy the code

Or add it directly to your web page using CDN:

< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" / >Copy the code

Method of use

  • Introduce the Animate. CSS library, as above;

  • Add the animation class name directly to the tag’s class name.

  • If it is used in a component to implement show/hide control, you can directly set it in transition enter-active-class and leave-active-class.

<div id="app"> <button type="button" @click="handleClick"> </button> <transition name="fade" enter-active-class="animated swing" leave-active-class="animated bounce"> <child v-if="show"></child> </transition> </div>Copy the code

Note:

  • You need to use a custom class name to use the CSS animation library.
  • ClassanimatedConcrete class name + concrete animation name (based on actual requirements).