web-dev-qa-db-ja.com

CSSトランジションを使用してマージンとパディングをアニメーション化すると、アニメーションがびくびくする

私の 個人のWebサイト では、上部ナビゲーションのCSS3 Transitionプロパティを使用して、要素のマージンとパディングをボーダーでアニメーション化し、ホバー時にボーダーを膨らませています。

関連マークアップ：

<nav>
        <a class="email" href="mailto:notmyrealemailaddress">
          <div class="icon-border">
            <img src="images/mail_icon.png" width="14" height="12">
          </div>Email Me</a>

        <a class="phone" href="tel:4075555555">
          <div class="icon-border">
            <img src="images/phone_icon.png" width="11" height="18">
          </div>Call Me</a>

        <a class="behance" href="http://behance.net/dannymcgee" target="_blank">
          <div class="icon-border">
            <img src="images/behance_icon.png" width="21" height="13">
          </div>See My Work</a>
</nav>

CSS：

header nav .icon-border {
  display: inline-block;
  border: 2px solid #000;
  border-radius: 30px;
  padding: 5px;
  margin: 0 10px;
  transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}

header nav a:hover .icon-border {
  padding: 10px;
  margin: -10px 5px;
  border: 2px solid #ddd;
  transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}

それが何をしているのかわかりますか？マージンを減らしてホバーのパディングを増やすことにより、円形の境界線は、ラップされるイメージの位置を変更せずに効果的に大きくなります。

かなりうまくいきますが、問題は、最初のアニメーションが完了する前に、マウスをEMAIL MEからCALL MEに、またはその逆にすばやく移動すると、ナビゲーション全体が約1ピクセル上下に「ジャンプ」することです。ただし、この問題はCALL MEとSEE MY WORKの間では発生しないため、修正できる問題であると私は思います。何か案は？

htmlcsscss-transitions
10
dannymcgee

私は、マージンを移行している（そして常に少し不安定な負のマージンを使用している）ために問題が発生すると考えています。

よりスムーズな解決策はtransform: scale(x)を使用している可能性があります

次のように：

header nav .icon-border {
  display: inline-block;
  border: 2px solid #000;
  border-radius: 30px;
  padding: 5px;
  margin: 0 10px;
  transform: scale(1); /* you need a scale here to allow it to transition in both directions */
  transition: 0.15s all ease;
}

header nav a:hover .icon-border {
  transform: scale(1.2);
  border: 2px solid #ddd;
}
17
JustH

多分これはうまくいきます：

header nav a {
  display: inline-block;
}
1
fcastillo