Home  >  Article  >  Web Front-end  >  What are keyframes in css3

What are keyframes in css3

WBOY
WBOYOriginal
2021-12-16 14:28:143255browse

Keyframes in css are the key positions that determine the changes in animation animation. They are defined through "Keyframes" and are a rule for creating animations in css; the syntax is "@keyframes animation name {keyframes-selector{css -styles;}}".

What are keyframes in css3

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

What are keyframes in css3

In css, keyframes can be arranged in any order to determine the key position of the Animation animation change. It is defined through "Keyframes".

Use @Keyframes rules to create animations that gradually change from one CSS style setting to another. During the animation process, the css style settings can be changed multiple times through @Keyframes rules.

With the @keyframes rule, you can create animations. Animations are created by gradually changing one set of CSS styles into another. You can change this set of CSS styles multiple times during the animation.

Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%. 0% is the start time of the animation, 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;}}

The attribute values ​​are as follows:

What are keyframes in css3

The example is as follows:

<html>
<head>
<style> 
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;}
}
</style>
</head>
<body>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>

Output results :

What are keyframes in css3

(Learning video sharing: css video tutorial)

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn