1

背景画像をアニメーション化して、リンクをホバーすると無限に (リンクの上にホバーしている限り) 905 から 100% の間で前後に移動するようにしようとしています。再生する JSFiddle を作成しましたが、実際にはアニメーションに移行するのではなく、背景を移動するだけです。JSFiddle

CSS

a{display: block; background: url('thin-right-arrow.png') no-repeat right center; widht: 100%:}

a                   {background-position: 90% center;}

a:hover     {background-position: 100% center; -webkit-animation: animatedBackground 40s linear infinite;} 

@keyframes animatedBackground {
    from { background-position: 90% center; }
    to { background-position: 100% center; }
}
4

2 に答える 2

5

まず、アニメーションが 40 秒と非常に遅くなります。次に、キーフレームのすべてのベンダー プレフィックス バージョンを含める必要があります。-webkitキーフレームを忘れただけです。

注: jquery/javascript は必要ありません

ホバーを外した後に矢印がスムーズに戻るようにする場合はtransition、ベンダーとそのベンダーのプレフィックス付きの仲間を追加するだけです

編集：一方向に滑らかに連続するだけでなく、ホバリング時に前後に滑らかにしたいようです。キーフレームを変更するだけでまったく同じ概念です。

デモ: jsFiddle

a {
    background-position: 90% center;

    -webkit-transition: background-position 0.3s linear;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: background-position 0.3s linear;  /* Firefox 4-15 */
    -o-transition: background-position 0.3s linear;  /* Opera 10.50–12.00 */
    transition: background-position 0.3s linear;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

a:hover {
    background-position: 100% center;

    -moz-animation: animatedBackground 2s infinite linear;
    -o-animation: animatedBackground 2s infinite linear;
    -webkit-animation: animatedBackground 2s infinite linear;
    animation: animatedBackground 2s infinite linear;
}

@-moz-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}
@-webkit-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}
@-o-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}
@-ms-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}
@keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}

これは、連続した (右への) 矢印バージョンです。

デモ: jsFiddle

a {
    background-position: 90% center;

    -webkit-transition: background-position 0.3s linear;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: background-position 0.3s linear;  /* Firefox 4-15 */
    -o-transition: background-position 0.3s linear;  /* Opera 10.50–12.00 */
    transition: background-position 0.3s linear;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

a:hover {
    background-position: 100% center;

    -moz-animation: animatedBackground 2s infinite linear;
    -o-animation: animatedBackground 2s infinite linear;
    -webkit-animation: animatedBackground 2s infinite linear;
    animation: animatedBackground 2s infinite linear;
}

@-moz-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
@-webkit-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
@-o-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
@-ms-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
@keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
于 2013-11-11T21:53:36.033 に答える
4

@-webkit-keyframes animateアニメーションが-webkitブラウザで動作するために必要でした。

注、他のベンダーを追加していないため、ブラウザーでのみ機能します。-webkit

リンクの上にカーソルを置いている間、アニメーションを持続させたい場合は、JS/jQuery は必要ありません(例)。ただし、リンクの上にカーソルを置いたときにアニメーションを開始し、その後無限に進みたい場合は、jQuery ベースのソリューションを次に示します: jsFiddle の例

jQuery:

$('a').hover(function(){
    $(this).addClass('animate');
});

CSS:

.animate {
    background-position: 90% center;
    -webkit-animation: animate 4s infinite;
}
@-webkit-keyframes animate {
    50% {
        background-position: 100% center;
    }
}
于 2013-11-11T21:53:06.123 に答える