css@keyframes属性语法
css @keyframes属性语法
@keyframes是什么？
@keyframes是CSS的⼀种规则，可以⽤来定义CSS动画的⼀个周期的⾏为，创建简单的动画。
作⽤：通过 @keyframes 规则，您能够创建动画。
说明：创建动画的原理是，将⼀套 CSS 样式逐渐变化为另⼀套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分⽐来规定改变发⽣的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器⽀持，您应该始终定义 0% 和 100% 选择器。
注释：请使⽤动画属性来控制动画的外观，同时将动画与选择器绑定。
css @keyframes属性⽰例
<!DOCTYPE html>
<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
{
0%  {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}
@-moz-keyframes mymove /* Firefox */
{
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;}
}
html animation属性@-o-keyframes mymove /* Opera */
{
0%  {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中⽆效。</p>
<div></div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。