Home >Web Front-end >CSS Tutorial >What rules need to be applied when using css3 animation?
CSS3 @keyframes Rules
## Tag definition and usage instructions
Using @keyframes rules, you can create animations. Create animations by gradually changing from one CSS style setting to another. You can change the CSS style settings multiple times during the animation process. Specify when the change occurs using %, or the keywords "from" and "to", which are the same as 0% to 100%.
0% is when the animation starts, 100% is when the animation is completed. (Recommended learning:
CSS3 Video Tutorial.)
For best browser support, you should always define selectors for 0% and 100%.
Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
| Required. Percentage of animation duration. Legal values: 0-100% from (same as 0%) |
|
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3</title>
<style>
div
{
width:100px;
height:100px;
background:blue;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>The above is the detailed content of What rules need to be applied when using css3 animation?. For more information, please follow other related articles on the PHP Chinese website!