如何使用CSS-webkit动画制作位置动画

How can one animate position using CSS -webkit-animation

本文关键字：位置 动画 动画制作 CSS-webkit 何使用      更新时间：2024-03-20

我想让图像从点a到点b。我可以设置模糊的动画，并平滑缩放，但位置不起作用。它没有正常流动。我试过translatex和translatey，但似乎没有反应。有人能帮我一把吗。这是我的密码。

body {overflow:hidden;
margin: 0;}
		#bird {position: relative;
			-webkit-animation: birdfly 5s linear infinite;
  			animation: birdfly 5s linear infinite;
		}
@-webkit-keyframes birdfly {
  0% { 
    -webkit-filter: blur(15px);
    -webkit-transform: scale(0.7, 0.7);
    left:110px; top:200px;
  }
  
  }
   100% { 
    -webkit-filter: blur(0px);
    -webkit-transform: scale(1.8, 1.8);
    left:400px; top:600px;
  }
}
@keyframes birdfly {
  0% { 
    -webkit-filter: blur(15px);
    -webkit-transform: scale(0.7, 0.7);
    left:110px; top:200px;
  }
  
  }
   100% { 
    -webkit-filter: blur(0px);
    -webkit-transform: scale(1.8, 1.8);
    left:400px; top:600px;
  }
}
<html>
<head>
	<title>Animated image</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="bird">
 		<img src="http://i556.photobucket.com/albums/ss3/t_wangrung/Bird/ibon.gif">
 	</div>
</body>
</html>

我编辑了您的源代码。

body {overflow:hidden;
margin: 0;}
		#bird {position: relative;
			-webkit-animation: birdfly 5s linear infinite;
  			animation: birdfly 5s linear infinite;
		}
@-webkit-keyframes birdfly {
  0% { 
    -webkit-filter: blur(15px);
    -webkit-transform: scale(0.7, 0.7);
    -webkit-transform: translate(110px, 200px);
    transform: translate(110px, 200px);
  }
  
  }
   100% { 
    -webkit-filter: blur(0px);
    -webkit-transform: scale(1.8, 1.8);
    -webkit-transform: translate(400px, 600px);
    transform: translate(400px, 600px);
  }
}
@keyframes birdfly {
  0% { 
    -webkit-filter: blur(15px);
    -webkit-transform: scale(0.7, 0.7);
    -webkit-transform: translate(110px, 200px);
    transform: translate(110px, 200px);
  }
  
  }
   100% { 
    -webkit-filter: blur(0px);
    -webkit-transform: scale(1.8, 1.8);
    -webkit-transform: translate(400px, 600px);
    transform: translate(400px, 600px);
  }
}
<html>
<head>
	<title>Animated image</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="bird">
 		<img src="http://i556.photobucket.com/albums/ss3/t_wangrung/Bird/ibon.gif">
 	</div>
</body>
</html>

您需要使用-webkit transform:translate（translateX，translateY）属性。

如果你想使用jQuery，你可以这样做：

$("img").animate({
    left: newXValue,
    top: newYValue
});

有关更多详细信息，请参阅：http://api.jquery.com/animate/

相关文章：