How can I make my animation transition smoothly?

Question

I am trying to make an animation of a panel attached with two string though a nail swing from left to right like a pendulum. Here is the animation code and transition function. For the demo, you can check the snippet below:

.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>

It worked somehow but the animation is robotic and not very smooth and natural. Could you please point out how to improve this animation.

I also can use jQuery for this case if you need to use JS.

Answer 1

.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>

Answer 2

Similar to @Kushtrim's answer, but I have added a negative animation-delay so that the pendulum starts swinging from the bottom, rather than suddenly jumping to -25deg. Using this technique it is possible to start an animation mid way. Here are the relevant modified rules:

.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%; 
  } 
}

And a Fiddle: https://jsfiddle.net/125wps7s/

The animation-delay time requires trial and error to get right. I just picked a value that seemed close enough.

Answer 3

Try this Out

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;
}

Answer 4

Maybe something like this?

.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>