Question

我正试图制作一个附有两根弦的面板的动画，虽然钉子像一个摆锤一样从左到右摆动。这是动画代码和过渡功能。对于演示，您可以查看以下代码段：

＆＃13;

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

＆＃13;

<div class="headline">
  <div class="box">
    <span class="panel">Test Panel</span>
  </div>
</div>

＆＃13;

它以某种方式工作，但动画是机器人，不是非常流畅和自然。能不能指出如何改进这个动画。

如果你需要使用JS，我也可以在这种情况下使用jQuery。

Answer 1

与@ Kushtrim的答案类似，但我添加了一个负animation-delay，以便钟摆从底部开始摆动，而不是突然跳到-25deg。使用这种技术可以在中途开始动画。以下是相关的修改规则：

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

小提琴：https://jsfiddle.net/125wps7s/

animation-delay时间需要反复试验才能做到正确。我刚刚选择了一个看起来足够接近的值。

Answer 2

试试这个

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 3

也许是这样的？

＆＃13;

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

＆＃13;

<div class="headline">
  <div class="box">
    <span class="panel">Test Panel</span>
  </div>
</div>

＆＃13;

Answer 4

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

如何让我的动画顺利过渡？

4 个答案: