css: @keyframes

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
https://www.w3school.com.cn/cssref/pr_keyframes.asp 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">		
<title>@keyframes</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>		
<style type="text/css">  
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative;      
  animation:theanimation 4s infinite alternate; 
  -webkit-animation:theanimation 4s infinite alternate ; 
  -moz-animation:theanimation 4s infinite alternate ; 
  -o-animation:theanimation 4s infinite alternate ; 
  -ms-animation:theanimation 4s infinite alternate ; 
} 
#geovindu
	{
	 width:100px; 
  height:100px; 
  background:blue; 
  position:relative;      
  animation:geovindumove 4s infinite alternate; 
  -webkit-animation:geovindumove 4s infinite alternate ; 
  -moz-animation:geovindumove 4s infinite alternate ; 
  -o-animation:geovindumove 4s infinite alternate ; 
  -ms-animation:geovindumove 4s infinite alternate ;	
	}
@keyframes theanimation{ 
  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;} 
} 
@-moz-keyframes theanimation{ 
  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 theanimation{ 
  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;} 
} 
@-o-keyframes theanimation{ 
  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;} 
} 
	
@keyframes geovindumove
{
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;}
}

@-moz-keyframes mymove /* Firefox */
{
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 geovindumove /* 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;}
}

@-o-keyframes geovindumove /* Opera */
{
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> 
<div></div> 
	
<div id="geovindu"></div>
</body>
</html>

　　

posted @ 2022-12-04 22:44  ®Geovin Du Dream Park™  阅读(45)  评论(0)    收藏  举报