Как можно анимировать позицию с помощью CSS -webkit-анимации

Я хочу сделать изображение перейдите от poitn a to point b. Я могу анимировать размытие и масштабировать плавно, но позиция не работает. Он не течет так, как должен. Я попробовал это с translatex и перевел y, и он, похоже, не отвечает. Может кто-то, пожалуйста, дайте мне руку. Вот мой код.Как можно анимировать позицию с помощью CSS -webkit-анимации

body {overflow:hidden; 
 
margin: 0;} 
 
\t \t #bird {position: relative; 
 
\t \t \t -webkit-animation: birdfly 5s linear infinite; 
 
    \t \t \t animation: birdfly 5s linear infinite; 
 
\t \t } 
 

 
@-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> 
 
\t <title>Animated image</title> 
 
\t <meta charset="utf-8"> 
 
</head> 
 
<body> 
 
\t <div id="bird"> 
 
    \t \t <img src="http://i556.photobucket.com/albums/ss3/t_wangrung/Bird/ibon.gif"> 
 
    \t </div> 
 
</body> 
 
</html>

источник

2015-02-21 Joao Alves Marrucho

Я редактировал свой источник ,

body {overflow:hidden; 
 
margin: 0;} 
 
\t \t #bird {position: relative; 
 
\t \t \t -webkit-animation: birdfly 5s linear infinite; 
 
    \t \t \t animation: birdfly 5s linear infinite; 
 
\t \t } 
 

 
@-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> 
 
\t <title>Animated image</title> 
 
\t <meta charset="utf-8"> 
 
</head> 
 
<body> 
 
\t <div id="bird"> 
 
    \t \t <img src="http://i556.photobucket.com/albums/ss3/t_wangrung/Bird/ibon.gif"> 
 
    \t </div> 
 
</body> 
 
</html>

Вы должны использовать -webkit-преобразование: свойство переводить (translateX, translateY).

источник

2015-02-21 11:12:50 erhankaradeniz

Если вы за помощью JQuery, вы можете сделать это следующим образом:

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

Для получения более подробной информации см:

источник

2015-02-21 11:02:53 winhowes

Как можно анимировать позицию с помощью CSS -webkit-анимации

ответ

Смежные вопросы