J'essaie de faire une animation d'un panneau attaché avec deux cordes à travers un clou se balançant de gauche à droite comme un pendule. Voici le code d'animation et la fonction de transition. Pour la démonstration, vous pouvez consulter l'extrait ci-dessous:

.headline {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: 150px;
}

.headline .box {
  position: relative;
  top: 10px;
  left: -70px;
}

.headline .box:after {
  content: "";
  width: 45px;
  height: 45px;
  background: black;
  position: absolute;
  border-radius: 50%;
  top: -85px;
  left: 105px;
  z-index: 10;
}

.headline .panel {
  background: white;
  color: #ff004f;
  font-size: 46px;
  font-family: "Quicksand", sans-serif;
  padding: 10px;
  font-weight: 700;
  max-width: 250px;
  display: block;
  line-height: 46px;
  position: relative;
}

.headline .panel:hover {
  animation-timing-function: cubic-bezier(0.120, 0.485, 0.950, 0.475);
  animation: pendulum 2s infinite;
}

.headline .panel:before {
  content: "";
  width: 155px;
  height: 10px;
  background: white;
  display: block;
  transform: translateX(8px) rotate(148deg);
  position: absolute;
  top: -40px;
  left: -16px;
  border-radius: 5px;
}

.headline .panel:after {
  content: "";
  width: 150px;
  height: 10px;
  background: white;
  display: block;
  transform: translateX(-10px) rotate(-148deg);
  position: absolute;
  top: -40px;
  right: -18px;
}

@keyframes pendulum {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
    transform-origin: 50% -50%;
  }
  25% {
    transform: rotate(-25deg);
    transform-origin: 50% -50%;
  }
  75% {
    transform: rotate(25deg);
    transform-origin: 50% -50%;
  }
}

body {
  background-color: #EEE;
}
<div class="headline">
  <div class="box">
    <span class="panel">Test Panel</span>
  </div>
</div>

Cela a fonctionné d'une manière ou d'une autre, mais l'animation est robotique et pas très fluide et naturelle. Pourriez-vous s'il vous plaît indiquer comment améliorer cette animation.

Je peux également utiliser jQuery dans ce cas si vous devez utiliser JS.

jquery css animation
1
Tho Vo 17 nov. 2017 à 13:39

4 réponses

Meilleure réponse

Semblable à la réponse de @ Kushtrim, mais j'ai ajouté un animation-delay négatif pour que le pendule commence à osciller depuis le bas, plutôt que de sauter soudainement vers -25deg. En utilisant cette technique, il est possible de démarrer une animation à mi-chemin. Voici les règles modifiées pertinentes:

.headline .panel:hover {
      animation-timing-function: cubic-bezier(0.120, 0.485, 0.950, 0.475);
      animation: pendulum 2s infinite; 
      animation-delay: -1.3s /* I added this */
}

@keyframes pendulum {
  0% {
    transform: rotate(-25deg);
    transform-origin: 50% -50%; 
  }
  50% {
    transform: rotate(25deg);
    transform-origin: 50% -50%; 
  }
  100% {
    transform: rotate(-25deg);
    transform-origin: 50% -50%; 
  } 
}

Et un violon: https://jsfiddle.net/125wps7s/

Le temps animation-delay nécessite des essais et des erreurs pour réussir. J'ai juste choisi une valeur qui me semblait assez proche.

5
Jonathan Nicol 17 nov. 2017 à 11:03 
.headline {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        margin-top: 150px;
    }

    .headline .box {
        position: relative;
        top: 10px;
        left: -70px;
    }

    .headline .box:after {
        content: "";
        width: 45px;
        height: 45px;
        background: black;
        position: absolute;
        border-radius: 50%;
        top: -85px;
        left: 105px;
        z-index: 10;
    }

    .headline .panel {
        background: white;
        color: #ff004f;
        font-size: 46px;
        font-family: "Quicksand", sans-serif;
        padding: 10px;
        font-weight: 700;
        max-width: 250px;
        display: block;
        line-height: 46px;
        position: relative;
    }

    .headline .panel:hover {
        animation-timing-function: cubic-bezier(0.97, 0.96, 0.01, 0.01);
        animation: pendulum 3s infinite;
        -webkit-transition: 15s;
    }

    .headline .panel:before {
        content: "";
        width: 155px;
        height: 10px;
        background: white;
        display: block;
        transform: translateX(8px) rotate(148deg);
        position: absolute;
        top: -40px;
        left: -16px;
        border-radius: 5px;
    }

    .headline .panel:after {
        content: "";
        width: 150px;
        height: 10px;
        background: white;
        display: block;
        transform: translateX(-10px) rotate(-148deg);
        position: absolute;
        top: -40px;
        right: -18px;
    }

    @keyframes pendulum {
        0%{
            transform: rotate(-25deg);
            transform-origin: 50% -50%;
        }
        50%{
            transform: rotate(25deg);
            transform-origin: 50% -50%;
        }
        100%{
            transform: rotate(-25deg);
            transform-origin: 50% -50%;
        }
    }

    body {
        background-color: #EEE;
    }
<div class="headline">
    <div class="box">
        <span class="panel">Test Panel</span>
    </div>
</div>
0
Caster 17 nov. 2017 à 12:00

Peut-être quelque chose comme ça?

.headline {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: 150px;
}

.headline .box {
  position: relative;
  top: 10px;
  left: -70px;
}

.headline .box:after {
  content: "";
  width: 45px;
  height: 45px;
  background: black;
  position: absolute;
  border-radius: 50%;
  top: -85px;
  left: 105px;
  z-index: 10;
}

.headline .panel {
  background: white;
  color: #ff004f;
  font-size: 46px;
  font-family: "Quicksand", sans-serif;
  padding: 10px;
  font-weight: 700;
  max-width: 250px;
  display: block;
  line-height: 46px;
  position: relative;
}

.headline .panel:hover {
  animation-timing-function: cubic-bezier(0.120, 0.485, 0.950, 0.475);
  animation: pendulum 2s infinite;
}

.headline .panel:before {
  content: "";
  width: 155px;
  height: 10px;
  background: white;
  display: block;
  transform: translateX(8px) rotate(148deg);
  position: absolute;
  top: -40px;
  left: -16px;
  border-radius: 5px;
}

.headline .panel:after {
  content: "";
  width: 150px;
  height: 10px;
  background: white;
  display: block;
  transform: translateX(-10px) rotate(-148deg);
  position: absolute;
  top: -40px;
  right: -18px;
}

@keyframes pendulum {
  0%{
    transform: rotate(-25deg);
    transform-origin: 50% -50%;
  }
  50%{
    transform: rotate(25deg);
    transform-origin: 50% -50%;
  }
  100%{
    transform: rotate(-25deg);
    transform-origin: 50% -50%;
  }
}

body {
  background-color: #EEE;
}
<div class="headline">
  <div class="box">
    <span class="panel">Test Panel</span>
  </div>
</div>
1
Kushtrim 17 nov. 2017 à 10:48

Essayez ceci

headline {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: 150px;
}

.headline .box {
  position: relative;
  top: 10px;
  left: -70px;
}

.headline .box:after {
  content: "";
  width: 45px;
  height: 45px;
  background: black;
  position: absolute;
  border-radius: 50%;
  top: -85px;
  left: 105px;
  z-index: 10;
}

.headline .panel {
  background: white;
  color: #ff004f;
  font-size: 46px;
  font-family: "Quicksand", sans-serif;
  padding: 10px;
  font-weight: 700;
  max-width: 250px;
  display: block;
  line-height: 46px;
  position: relative;
}

.headline .panel:hover {
  animation-timing-function: cubic-bezier(0.120, 0.485, 0.950, 0.475);
  animation: pendulum 2s infinite;
}

.headline .panel:before {
  content: "";
  width: 155px;
  height: 10px;
  background: white;
  display: block;
  transform: translateX(8px) rotate(148deg);
  position: absolute;
  top: -40px;
  left: -16px;
  border-radius: 5px;
}

.headline .panel:after {
  content: "";
  width: 150px;
  height: 10px;
  background: white;
  display: block;
  transform: translateX(-10px) rotate(-148deg);
  position: absolute;
  top: -40px;
  right: -18px;
}

@keyframes pendulum {
animation: all infinite;
  0%{
    transform: rotate(-25deg);
    transform-origin: 50% -50%;
  }
  50%{
    transform: rotate(25deg);
    transform-origin: 50% -50%;
  }
  100%{
    transform: rotate(-25deg);
    transform-origin: 50% -50%;
  }
}

body {
  background-color: #EEE;
}
2
Karim boutbouqalt 17 nov. 2017 à 10:53
47348707

Questions connexes

26 Comment vérifier si un élément est masqué dans jQuery?
24 Comment faire une div à 100% de la hauteur de la fenêtre du navigateur
26 Comment actualiser une page avec jQuery?
28 Comment renvoyer la réponse d'un appel asynchrone?

De nouvelles questions

2 Comment stocker les données récupérées sur le serveur dans un tableau avec JavaScript?
2 JQuery .each peut-il être utilisé lors de la définition d'un intervalle dans lequel définit le .html () d'un élément?
2 La valeur d'entrée est définie et visible mais non accessible dans un autre script
2 Créer un objet imbriqué à partir d'entrées
2 Comment puis-je créer un bouton «En savoir plus» pour plusieurs éléments de texte?
4 Supprimer uniquement le dernier _ d'une chaîne en utilisant split ()?
2 Donnez à un élément la classe des enfants d'un autre élément avec jQuery ou JS (owl-carousel)
2 Comportement d'attribut coché
2 "Parents (). Filter" renvoie undefined si l'attribut data est égal à zéro
2 Empêcher la page de réussite du formulaire d'accès direct en PHP
Toutes les questions sur jquery >

jquery

jQuery est une bibliothèque JavaScript, pensez également à ajouter la balise JavaScript. jQuery est une bibliothèque JavaScript multi-navigateur populaire qui facilite la traversée du Document Object Model (DOM), la gestion des événements, les animations et les interactions AJAX en minimisant les écarts entre les navigateurs. Une question marquée jQuery doit être liée à jQuery, donc jQuery doit être utilisée par le code en question et au moins les éléments liés à l'utilisation de jQuery doivent être dans la question.

Plus à propos jquery...