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

Question

我想让一张图片从a点到b点。我可以为模糊设置动画，并平滑地缩放，但位置不起作用。它没有像它应该的那样流动。我已经用 translatex 和 translate y 试过了，它似乎没有反应。有人可以帮我一下吗？这是我的代码。

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>

Answer 1

如果您准备使用 jQuery，您可以这样做：

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

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

Answer 2

我编辑了你的来源。

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) 属性.

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

How can one animate position using CSS -webkit-animation

javascript

html

css

onload

transitions