Ajouter une animation au survol d'une div avec CSS transform scale

Question

Ajouter une animation au survol d'une div avec CSS transform scale

Demandé el 25 de Mars, 2018: Quand la question a-t-elle été
657 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.hvr-pulse-grow {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}

.hvr-pulse-grow:hover,
.hvr-pulse-grow:focus,
.hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

<!DOCTYPE html>
<html>

<head>
  <title>
    ALBERT
  </title>
  <link rel="stylesheet" type="text/css" href="tes.css">
</head>

<body>
  <div class="hvr-pulse-grow"></div>
</body>

</html>

Cela fonctionne bien, mais puis-je ajouter un transition pour revenir plus lentement à l'état initial après avoir sorti la souris de la boîte ? Quelqu'un connaît-il une solution à ce problème ? L'animation doit être répétée à l'infini jusqu'à ce que l'utilisateur survole la div.

Demandé el 25 de Mars, 2018 par Albert qerimi

Answer 1

2 Réponses

Answer 2

0voto

Scaramouche Points 2238

Vérifiez si cela correspond à votre objectif.

noter l'ajout de transition au carré lorsqu'il n'est pas ciblé , survolé ni actif De cette façon, il sera toujours transition (au lieu d'un retour rapide) à son état d'origine lorsqu'il n'est plus survolé.

REMARQUE : Selon le Temani Afif Mais cela ne fonctionne pas et comme c'est très simple (une ligne), je ne sais pas quoi faire si ce n'est attendre un troisième avis (celui de l'OP, j'espère) avant d'essayer de trouver et de réparer le problème.

Tenez-moi au courant

@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(2);
    transform: scale(2);        
  }
}
.hvr-pulse-grow {
  height:50px;
  width:50px;
  background:red;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  transition: 0.9s ease all
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

<!DOCTYPE html>
<html>
<head>
    <title>
        ALBERT 
    </title>
  <link rel="stylesheet" type="text/css" href="tes.css">
</head>
<body>
<div class="hvr-pulse-grow"></div>
</body>
</html>

Répondu el 25 de Mars, 2018 par Scaramouche (2238 Points )

Answer 3

0voto

Mark Points 1774

Vous pouvez ralentir l'événement "mouseleave" en ajoutant une animation à l'état normal de l'élément ainsi qu'une fonction from à la touche :hover l'animation.

Cela résout votre problème de manière pure CSS mais il serait beaucoup plus simple et plus propre de gérer cette animation avec jQuery o javascript . Avec jQuery vous pouvez simplement ajouter un transition pour toutes les propriétés de votre CSS puis gérer l'animation des événements mouseenter et mouseleave avec hover() méthode .

J'espère que cela vous aidera !

.hvr-pulse-grow {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px transparent;
  -webkit-animation-name: hvr-pulse-grow-out;
  animation-name: hvr-pulse-grow-out;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
}

.hvr-pulse-grow:hover {
  animation-iteration-count: infinite;
  transform: scale(1);
  -webkit-animation-name: hvr-pulse-grow-in;
  animation-name: hvr-pulse-grow-in;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
    -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@keyframes hvr-pulse-grow-in {
    from   { -webkit-transform: scale(1); }
    to { -webkit-transform: scale(1.1);}
}

@keyframes hvr-pulse-grow-out {
    from   { -webkit-transform: scale(1.1); }
    to { -webkit-transform: scale(1);}
}

<!DOCTYPE html>
<html>

<head>
  <title>
    ALBERT
  </title>
  <link rel="stylesheet" type="text/css" href="tes.css">
</head>

<body>
  <div class="hvr-pulse-grow"></div>
</body>

</html>

Répondu el 25 de Mars, 2018 par Mark (1774 Points )

Ajouter une animation au survol d'une div avec CSS transform scale

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Ajouter une animation au survol d'une div avec CSS transform scale

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: