What rules in css3 are used to define animations

Use the "@keyframes" rule in css3 to define animations. The "@keyframes" rule is used to specify animation rules, which define the behavior of a cycle of a CSS animation and can create simple animations; intermediate steps during the animation sequence cycle can be specified by establishing keyframes along the animation sequence.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

@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.

Syntax:

@keyframes animation-name {keyframes-selector {css-styles;}}

• ##animation-name: This is required, it defines the animation name.

• keyframes-selector: Defines the percentage of animation, which is between 0% and 100%. An animation can contain many selectors.

/* 定义动画n */
@keyframes your-animation-name {
    /* style rules */
}
/* 将其应用于元素 */
.element {
    animation-name: your-animation-name;
    /* 或者使用动画速记属性 */
    animation: your-animation-name 1s ...
}

Inside curly braces, define keyframes or path points that specify the value of the property to be animated at certain points during the animation. This allows you to control intermediate steps in the animation sequence. For example, a simple animated @keyframe might look like this:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

0%" and "100%" are keyframe selectors, each defining a keyframe rule. Keyframe declaration for a keyframe rule Blocks are made up of attributes and values.

You can also use the selector keywords from and to instead of 0% and 100% respectively, as they are equivalent.

@keyframes change-bg-color {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

Keyframes The selector consists of one or more comma-separated percentage values ​​or the from and to keywords. Note that the percentage unit specifier must be used for the percentage value. Therefore, '0' is an invalid keyframe selector. (Learning Video Sharing :

css video tutorial)

Note: For best browser support, always specify 0% and 100% selectors.

## Examples of using #css @keyframes:

1. Define the space where the animation occurs

HTML code:

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

2. Use @keyframes rules to create simple animations

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 effects

For more programming-related knowledge, please visit:

Programming Video

!!

The above is the detailed content of What rules in css3 are used to define animations. For more information, please follow other related articles on the PHP Chinese website!