Shulou(Shulou.com)06/02 Report--

This article will explain in detail what the key frame in css3 means, Xiaobian thinks it is quite practical, so share it with you as a reference, I hope you can gain something after reading this article.

The key frame in css is the key position to determine the animation change, defined by "Keyframes", and is a rule for css to create animation; the syntax is "@keyframes animation name {keyframe-selector {css-styles;}}".

Operating environment of this tutorial: Windows 10 system, CSS3 && HTML5 version, Dell G3 computer.

In CSS, keyframes can be assigned in any order to determine the key position of Animation animation changes, which are defined by "Keyframes".

Create animations using the @Keyframes rule by gradually changing from one CSS style setting to another. The @Keyframes rule allows you to change the css style settings several times during an animation.

With the @keyframes rule, you can create animations. Animation is created by gradually changing one CSS style to another. You can change the CSS style several times during the animation.

Specify the time at which the change occurs as a percentage, or through the keywords "from" and "to," equivalent to 0% and 100%. 0% is the start time of the animation and 100% is the end time of the animation. For best browser support, you should always define 0% and 100% selectors.

The syntax is as follows:

@keyframes animationname {keyframes-selector {css-styles;}}

Attribute values are as follows:

示例如下：

div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /* Firefox */-webkit-animation:mymove 5s infinite; /* Safari and Chrome */-o-animation:mymove 5s infinite; /* Opera */}@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove /* Firefox */{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {top:0px;}to {top:200px;}}@-o-keyframes mymove /* Opera */{from {top:0px;}to {top:200px;}}

注释：本例在 Internet Explorer 中无效。

输出结果：

About "what does the key frame mean in css3" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.