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

Copy after login

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

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

css video tutorial)

## Examples of using #css @keyframes:

HTML code:

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; } }

For more programming-related knowledge, please visit:

!!

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!