What are @keyframes of css3

The content of this article is to introduce what @keyframes of css3 is, so that everyone can simply understand how @keyframes can be used. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What are CSS3 @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. [Recommended related video tutorials: CSS3 Tutorial]

Animations are similar to transitions because they both represent values ​​that change 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. For example:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

What is inside the curly braces of the @keyframes rule?

Inside the curly braces, we need to define keyframes or waypoints that specify the value of the property being animated at a specific point during the animation. This allows us to control intermediate steps in the animation sequence. For example, a simple animated @keyframe can look like this:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

Running effect:

##'0%', '50%', '100% ' are all keyframe selectors, each selector defines a keyframe rule. The keyframe declaration block of a keyframe rule consists of attributes and values.

The animation above resembles a simple transition effect: the background color changes starting from one value (0%) at the beginning of the animation, reaching a value (50%) in the middle, and reaching another value (100) at the end of the animation %). The "0%", "50%", and "100%" keyframe selectors define the waypoints or percentage points at which you want the animated property to change value. We can also use the selector keywords from, to instead of using 0% and 100% respectively, they are equivalent.

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

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

The following is an example of an animation with a keyframe selector that includes multiple comma-separated percentage values ​​and/or the keyword keyframe selectors from and to.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

The @keyframes rule definition above: The element's top offset will be equal to zero at the beginning, halfway through, and at the end of the animation, and it will be equal to zero at one-quarter and three-quarters of the way. 100px; This means that the element moves up and down several times during the animation loop.

@keyframes rules Example of creating a simple animation:

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 effect

#In the above example, five keyframes are assigned to the animation named "bounce". 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.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

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