css @keyframes规则

最新推荐文章于 2023-02-09 15:58:34 发布

iteye_5725

最新推荐文章于 2023-02-09 15:58:34 发布

阅读量387

点赞数

本文链接：https://blog.csdn.net/iteye_5725/article/details/82681850

版权

css3里有一个@keyframes规则使用它可以创建一个简单的动画

创建动画的原理是将一套css样式逐渐变化成另一套样式

以百分比%来规定改变发生的时间或使用from和to 等价于0% 100%

0%是动画开始的时间100%动画结束的时间应该始终定义0%和100%

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;

}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

上面这个例子会变换位置并改变颜色

在动画完成时它会回到原来的样子位置

目前浏览器不支持@keyframes 规则

需要在你使用的浏览器前加标示

火狐