3

キーフレームでcss3アニメーションを作っています。しかし、私には問題があります。これは私のコードです:

a[title*="in je favorieten"]:hover {
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    -moz-animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slidein {
    from {
        width: 25px;
    }

    to {
        width: 80px;
    }
}

@-webkit-keyframes slidein  {
    from {
        width: 25px;
    }

    to {
        width: 80px;
    }
}

問題は。a要素にカーソルを合わせると。a 要素は幅 80 に設定する必要があります。a 要素よりも 25 幅に戻す必要があります。しかし今、私がホバリングすると、彼がアニメーションを行います。そして、彼は 25 歳に戻ります。これを修正するにはどうすればよいですか?

ありがとう！

4

2 に答える 2

1

アプローチも正しくないことを除いて... Abhishekが最初に書いたようにあなたは移行に固執するべきです。

キーフレームを使用したCSS3アニメーションの場合は、仕様を確認する必要があります。あなたのコードが基本的に言っているのは、「'slidein' /'slideout'で指定されたアニメーションを交互の方向（左から右/右から左）で3回続けて実行する」です。

次の3行を削除し、Abhishekのコードを含めて機能させます（より良い）

-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;

ただし、これにより、ページの読み込み時にレイヤーが表示されないようにちらつく可能性があります（テストしていません）

参照： http ：//www.w3.org/TR/css3-animations/#animation-iteration-count

于 2011-12-12T19:49:50.520 に答える
1

あなたが望むものは、アニメーションを介して実装するのは良い考えではありません.

CSS3 トランジションを使用してみてください [サポートは同じです]

サンプルコードはこちら

a{ 

 display:inline-block;
 width:25px;
 -moz-transition: width 1s; // Mozzilla
 -webkit-transition: width 1s; // Webkit
 transition: width 1s; // W3C
}

a:hover{
 // with a simple trickary this can be used to generate the same results what you want.
  width:100px;
}

そして、あなたがまだアニメーションのことをフォローしたいのなら

というルールを追加するだけです

 a[title*="in je favorieten"]{
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
-moz-animation-name: slideout;
-webkit-animation-name: slideout;
-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
 }


 @-moz-keyframes slideout {
    from {
        width: 80px;
     }

     to {
        width: 25px;
     }
   }

@-webkit-keyframes slideout  {
    from {
        width: 80px;
     }

    to  {
       width: 25px;
   }
}
于 2011-12-12T14:56:15.353 に答える