CSS3 @keyframes 规则 | CSS3教程:CSS3动画

返回到:CSS3动画 | CSS3教程

标签定义及使用说明

使用@keyframes规则,你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中,您可以更改CSS样式的设定多次。

指定的变化时发生时使用%,或关键字”from”和”to”,这是和0%到100%相同。

0%是开头动画,100%是当动画完成。

为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。

注意: 使用animation属性来控制动画的外观,还使用选择器绑定动画。.

语法

@keyframes animationname {
  keyframes-selector {
    css-styles;
  }
}
说明
animationname必需的。定义animation的名称。
keyframes-selector必需的。动画持续时间的百分比。合法值:0-100%
from (和0%相同)
to (和100%相同)
注意: 您可以用一个动画keyframes-selectors。
css-styles必需的。一个或多个合法的CSS样式属性

浏览器支持

属性谷歌IE火狐苹果opera
@keyframes43.0
4.0 -webkit-
10.016.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

实例

使一个div元素逐渐移动200像素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
</style>
</head>
<body>

<p><strong>注意:</strong>  @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

许多关键帧选择器中添加一个动画:

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

DEMO:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	0%   {top:0px;}
	25%  {top:200px;}
	75%  {top:50px}
	100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px;}
	25%  {top:200px;}
	75%  {top:50px}
	100% {top:100px;}
}
</style>
</head>
<body>

<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

Change many CSS styles in one animation:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
<body>

<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

Many keyframe selectors with many CSS styles:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>

<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/css3animate/5073.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年1月10日 下午3:08
下一篇 2022年1月10日 下午3:39

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注