2

アンカータグがあるとしましょう。色と背景色が変化するだけでなく、アンカータグがホバーされている場合、トランジションを使用してアンカータグ内のテキストを移動し、ホバーしたときに5ピクセル右に移動し、1秒ほど後に元に戻るにはどうすればよいですか?位置。

4

2 に答える 2

4

text-indentCSS アニメーションと( DEMO )を使用したソリューション:

a {
  display: block;
}

a:hover {
  -webkit-animation: INDENT 2s 1; /* Safari 4+ */
  -moz-animation:    INDENT 2s 1; /* Fx 5+ */
  -o-animation:      INDENT 2s 1; /* Opera 12+ */
  animation:         INDENT 2s 1; /* IE 10+ */
}

@-webkit-keyframes INDENT{  
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@-moz-keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@-o-keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}

より滑らかなアニメーションを得るには、設定を少し変更する必要がある場合があります。キーフレームを調整することで遅延を実現できます。2 秒のアニメーションで 1 秒の遅延を取得するには、次のようになります ( DEMO ):

@keyframes INDENT{  
  0%   { text-indent: 0; }
  25% { text-indent: 5px; }
  75% { text-indent: 5px; }
  100% { text-indent: 0; }
}

caniuse で CSS アニメーションのブラウザー サポートを確認できます。

于 2013-08-02T20:23:04.343 に答える
1

ほんの少しの JavaScript を使用すると、すべてがスムーズになります (以下の CSS は最低限必要なものです)。

a {
    display: inline-block; /* this just has to be block-level */
    -webkit-animation: moveAndBack 1s ease-in-out;
}
a.not-ready {
    -webkit-animation-duration: 0;
}
a:hover {
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes moveAndBack {
    0% { -webkit-transform: translate(0); }
    25% { -webkit-transform: translateX(5px); }
    100% { -webkit-transform: translateX(5px); }
}

ここで見る

そして、javascript が行っている唯一のことは、ロード時にアニメーションが実行されないようにすることです。

フィドルの最新の編集と更新により、アニメーションが完了するのに十分な時間リンクにカーソルを合わせた場合にのみ発生する問題が処理されます。次回から再起動しません。そのため、javascript は のリンクを複製して置き換えmouseoutます。

于 2013-08-02T20:19:47.567 に答える