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.

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