Animer un élément sur une trajectoire sinusoïdale

Question

Je dois saisir pour déplacer un élément sur l'onde sinusoïdale ou le chemin comme indiqué dans l'image ci-dessus. J'ai fait quelque chose. Mais ça ne marche pas comme je le veux.

img { 
 
    position:absolute; 
 
    animation: roam infinite; 
 
    animation-duration: 15s; 
 
} 
 

 
@keyframes roam { 
 
    0% { left: 50px; top:100px } 
 
    10%{ left:100px; top:100px } 
 
    20%{ left:200px; top:200px } 
 
    30%{ left:300px; top:50px } 
 
    40%{ left:400px; top:200px } 
 
\t 
 
}

<img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png">

Answer 1

Vous pouvez déplacer un élément sur un chemin sinus avec 2 CSSkeyframe animations. Le point est de traduire vers la gauche à droite avec un timing function linéaire et haut/bas avec une fonction de synchronisation d'entrée-sortie.

Cela nécessite de translater le conteneur et de déplacer l'élément de haut en bas avec 2 animations d'images clés différentes. Voici un exemple:

div{ 
 
    position:absolute; 
 
    left:0; 
 
    width:10%; 
 
    animation: translate 15s infinite linear; 
 
} 
 
img { 
 
    position:absolute; 
 
    animation: upDown 1.5s alternate infinite ease-in-out; 
 
    width:100%; 
 
} 
 

 
@keyframes upDown { 
 
    to { transform: translatey(100px);} 
 
} 
 
@keyframes translate { 
 
    to { transform: translatex(900%);} 
 
}

<div> 
 
    <img src="http://i.imgur.com/QdWJXta.png"> 
 
</div>

Notez que cet exemple ne contient pas préfixes fournisseurs. Pour plus d'informations, consultez canIuse pour:

• CSS keyframe animations
• CSS 2D transforms