what are css keyframes

css keyframes is a rule of CSS3 that can be used to define the behavior of a period of CSS animation and create simple animations; the keyframe rule consists of the keyword "@keyframe", followed by the given animation The identifier of the name.

The operating environment of this article: windows10 system, css3, thinkpad t480 computer.

Recommended: "css video tutorial"

What is CSS @keyframes? What is the use?

@keyframes is a rule of CSS3 that can be used to define the behavior of a period of CSS animation and create simple animations.

Animations are similar to transitions in that they are representations of changing CSS properties over time. The main difference is that the transition is triggered implicitly when the property value changes (for example, when the property value changes on hover), but the animation is performed explicitly when an animated property is applied. Therefore, animations need to show explicit values ​​for animated properties. These values ​​are defined by the animation keyframes specified in the @keyframes rule. Therefore, the @keyframes rule consists of a set of encapsulated CSS style rules that describe how attribute values ​​change over time.

Then, using different CSS animation properties, you can control many different aspects of the animation, including how many times the animation iterates, whether it alternates between start and end values, and whether the animation should run or be paused. Animations can also delay their start time.

@keyframe rules consist of the keyword "@keyframe", followed by an identifier giving the name of the animation (which will be referenced using animation-name), followed by a set of style rules (delimited by curly braces) . The animation is then applied to the element by using the identifier as the value of the animation-name attribute.

css @keyframes usage examples:

1. Define the space where animation occurs

HTML code:

<div class="container">
  <div class="element"></div>
</div>

2. Use @keyframes rules to create simple Animation

css code

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}
.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}
@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

3. Running effect

In the above example, specify the animation named "bounce" five keyframes. Between the first and second keyframes (i.e., between '0%' and '25%'), use the ease-out timing function. Between the second and third keyframes (i.e. between '25%' and '50%'), use the ease-in timing function, etc. The effect will appear as the element moves 50px upwards, slowing down as it reaches its highest point, then speeding up as it drops back to 150px. The second half of the animation works in a similar way, but only moves the element up 25px. This animation creates a bouncing effect that can be used to simulate a bouncing ball animation.

Note:

@keyframes rules are not cascaded; therefore, animations will never derive keyframes from multiple @keyframes rules.

To determine the keyframe set, all values ​​in the selector need to be sorted by increasing time. If there are any duplicates (for example, if we wrote two '50%' keyframe rules and a declaration block), the @keyframes rule will specify that the last keyframe is used to provide keyframe information for that time. @keyframes If multiple keyframes specify the same keyframe selector value, there is no cascading in the rule.

The above is the detailed content of what are css keyframes. For more information, please follow other related articles on the PHP Chinese website!