22

背景色で無限のアニメーションを実行しているリンクがあります。アニメーションを停止し、ホバー時に別の背景色に移行したいと考えています。

.startlink{
    background-color:#206a9e;
    color:#fff;
    border-radius:15px;
    font-family: 'Myriad Pro';
    -webkit-animation:changeColor 3.4s infinite;
    -webkit-transition:all 0.2s ease-in;
}

.startlink:hover{
    -webkit-animation-play-state: paused;
    background-color: #014a2a;
}

@-webkit-keyframes changeColor 
{
    0%   {background:#206a9e;}
    50%  {background:#012c4a;}
    100%   {background:#206a9e;}
}

このコードが機能しないのはなぜですか? そして、これを行う別の方法はありますか? （できればJavascriptなし）。

4

6 に答える 6

1

これを達成する別の方法を見つけました。

別のアニメーション キーフレーム シーケンスを作成し、ホバーで呼び出します。

.startlink{
background-color:#206a9e;
color:#fff;
border-radius:15px;
font-family: 'Myriad Pro';
-webkit-animation:changeColor 3.4s infinite;
-webkit-transition:all 0.2s ease-in;
}

.startlink:hover{
-webkit-animation:hoverColor infinite;
}

@-webkit-keyframes changeColor 
{
0%   {background:#206a9e;}
50%  {background:#012c4a;}
100%   {background:#206a9e;}
}
@-webkit-keyframes hoverColor 
{
background: #014a2a;
}
于 2013-04-12T04:28:33.247 に答える