如何一个动画的位置使用CSS -webkit-animation

本文介绍了如何一个动画的位置使用CSS -webkit-animation的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让图片从poitn转到b点。我可以动画的模糊，并缩放顺利，但位置不工作。它不流动，因为它应该。我已经尝试过translatex和翻译y，它似乎没有回应。有人可以给我一只手。这是我的代码。

  body {overflow：hidden; margin：0;} #bird {position：relative; -webkit-animation：birdfly 5s线性无限;动画：鸟类5s线性无限; } @  -  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>动画图片< / 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线性无限;动画：鸟类5s线性无限; } @  -  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）; transformation：translate（400px，600px）; }}

 < html>< head& < title>动画图片< / 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）属性。

I want to make an image go from poitn a to point b. I can animate the blur, and scale smoothly but the position is not working. It doesn't flow as it should. I have tried it with translatex and translate y and it doesn't seem to respond. Can someone please give me a hand. Here is my code.

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>

解决方案

I edited your source.

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>

You need to use the -webkit-transform: translate(translateX, translateY) property.

这篇关于如何一个动画的位置使用CSS -webkit-animation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！