Flottant fantôme CSS animation

J'ai créé un fantôme SVG pour le logo de mon site Web. J'ai fait une animation CSS donc quand un utilisateur survole le logo, le fantôme commence à flotter.

Tout fonctionne bien sauf que quand il n'est pas bougé, le fantôme revient à sa position d'origine. Est-il possible de l'animer aussi quand il revient à translateY (0) ? J'ai essayé moi-même une solution, mais ça ne marche pas.

Voici l'exemple:

<div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

@keyframes float {
  100% {
    transform: translateY(-8px);
  }
}
@keyframes bob {
  0% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes sink {
  100% {
    transform: translateY(0);
  }
}
#logo svg {
  margin: 20px;
  overflow: visible;
}
#logo #ghost {
  animation-name: sink;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
#logo:hover #ghost {
  animation-name: float, bob;
  animation-duration: 0.3s, 0.7s;
  animation-timing-function: ease-out, ease-in-out;
  animation-delay: 0s, 0.3s;
  animation-direction: normal, alternate;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
}
<div id="logo">
   
 
 
 
</div>
</div> </div>
0
À ma connaissance ... ce n'est pas possible avec les animations CSS. Par exemple ... si vous deviez faire une animation qui s'estompe à travers les couleurs de l'arc-en-ciel en vol stationnaire ... et ensuite vous vous en êtes éloigné --- comment pourrait-il savoir comment récupérer la couleur d'origine? Je crois que c'est une fonction plus complexe, et je proposerais JavaScript et peut-être une bibliothèque comme velocity.js pour aider.
ajouté l'auteur sheriffderek, source
ajouté l'auteur sheriffderek, source
Je savais que ce n'était pas ce que tu voulais vraiment ... mais c'était amusant. :) BTW vous pouvez complètement mettre votre SVG dans un div et le déplacer ... et - vous pouvez également animer n'importe quelle partie du svg. Donnez simplement le code etc ... (selon mon expérience)
ajouté l'auteur sheriffderek, source
C'est comme ça que je le ferais avec velocity.js --- mais comme vous allez le voir - il faut des minuteurs et pour effacer les intervalles: codepen.io/sheriffderek/pen/vOeGMK
ajouté l'auteur sheriffderek, source
J'ai ajouté une démo à la question.
ajouté l'auteur Lilferi, source
Merci pour votre aide @ Sheriffderek. Votre exemple fonctionne très bien, mais il ne correspond pas exactement à ce que j'essaie de mettre en œuvre. Mon fantôme ne flotte pas toujours infiniment, seulement quand il est plané. C'est aussi un SVG en ligne, donc je ne peux pas utiliser des propriétés comme position pour un élément .
ajouté l'auteur Lilferi, source
En effet c'était. : D Mon SVG a déjà un conteneur, mais seul un groupe l'anime, les autres groupes contiennent le texte de mon logo qui n'a pas d'animation, c'est pourquoi c'est si compliqué. Et oui, je peux donner des identifiants et des classes à des groupes, comme je l'ai fait avec #ghost, mais ils ne peuvent être animés qu'avec des transformations, et pas de positionnement. Avez-vous des suggestions sur comment cela serait possible avec JavaScript (jQuery)?
ajouté l'auteur Lilferi, source
Merci beaucoup!
ajouté l'auteur Lilferi, source
ajouté l'auteur Paulie_D, source

1 Réponses

Ce n'est pas si difficile avec JQuery.

Voici une fonction qui peut être appelée régulièrement avec une minuterie setInterval() :

var haunt=function(){
  var dy;
  ghost_ticks++;
  ghost_clock++;
  if (ghost_clock>30) ghost_clock=30;
  dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60);   /* sine wave */
  dy *= -40 + 6*Math.cos(ghost_ticks/5);               /* ramp      */
  $("#ghost").css("transform","translate(0,"+dy+"px)");
  if (ghost_clock==0) {
    clearInterval(ghost_timer);
    ghost_timer=ghost_ticks=0;
  }
}

Cela calcule la position du fantôme comme la somme de deux composantes - un mouvement de vague sinusoïdale, et un décalage vertical qui monte et descend au début et à la fin de l'animation et contrôle également l'amplitude du vol stationnaire.

Ceci est fait avec deux variables de comptage: ghost_ticks incrémente simplement à chaque tick et sert à calculer la position de vol stationnaire, tandis que ghost_clock contrôle la rampe en comptant jusqu'à 30 puis en arrêtant . A la fin de l'animation, sa valeur est rendue négative, donc elle revient à zéro, à quel point l'animation s'arrête.

Vous pouvez toujours utiliser une transition CSS pour changer la couleur du fantôme.

<div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

var ghost_ticks=0, ghost_clock=0, ghost_timer=0;
var haunt=function(){
  var dy;
  ghost_ticks++;
  ghost_clock++;
  if (ghost_clock>30) ghost_clock=30;
  dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60);
  dy *= -40 + 6*Math.cos(ghost_ticks/5);
  $("#ghost").css("transform","translate(0,"+dy+"px)");
  if (ghost_clock==0) {
    clearInterval(ghost_timer);
    ghost_timer=ghost_ticks=0;
  }
}
var start_haunting=function(){
  if (ghost_clock < 0) ghost_clock = -ghost_clock;
  if (!ghost_clock) ghost_timer=setInterval(haunt,25);
};
var stop_haunting=function(){
  if (ghost_clock > 0) ghost_clock = -ghost_clock;
};
$(document).ready(function(){
  $("#logo").hover(start_haunting,stop_haunting);
});
#logo { background-color:#000; width: 200px; height: 200px; }
#logo #ghost { fill:#333; transition: fill 1s; }
#logo:hover #ghost { fill:#999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">
   
 
 
 
</div>
</div> </div>
0
ajouté
Wow, merci beaucoup, ça marche super!
ajouté l'auteur Lilferi, source