0

私は最初のCSSキーフレームアニメーションに取り組んでおり、最初のランスルーが終了した後にアニメーションを一時停止する方法を知りたいです。ここで私のサイトをチェックすることができます：http：//www.tommaxwell.meそして下部の灰色の引用はあなたが見ることができるホバーアニメーションを持っています。ただし、アニメーションが終了するとリセットされます。終了時にアニメーションの終了状態のままになるように停止するにはどうすればよいですか？

この場合のキーフレームアニメーションの使用は、一種の不完全で不必要であることを私は知っていますが、私は実際にはキーフレームをテストしているだけであり、後でそれをよりよく使用します。:)

4

2 に答える 2

6

@Mrとして。エイリアンは答えました、トランジションはこれを好むことです、しかしあなたが尋ねたので-アニメーションの最後の状態を維持することは可能です。

これを行うには、animation-fill-mode: forwards;

これがデモです

これが私の例のコードです：

HTML

<div class="text">Hover here</div>​

CSS

.text {
  color: blue;  
}

.text:hover {
    -webkit-animation: color 1.0s ease-in forwards;
       -moz-animation: color 1.0s ease-in forwards;
         -o-animation: color 1.0s ease-in forwards;
            animation: color 1.0s ease-in forwards;    
}

@-webkit-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@-moz-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@-o-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

'animation-fill-mode'プロパティについて読みたい場合は、ここに良いリソースがあります。 http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property

于 2012-11-25T09:19:00.060 に答える
2

私はあなたがここで何をしているのか知っています、transition代わりにCSSを使用してください

デモ

.class {
   color: #ff0000;
   transition: color 2s;
   -moz-transition: color 2s; /* Firefox 4 */
   -webkit-transition: color 2s; /* Safari and Chrome */
   -o-transition: color 2s; /* Opera */
}

.class:hover {
   color: #00ff00;
}

JavaScriptを使用する必要があるため、テキストのホバー状態を保持することはできません。

于 2012-11-25T08:15:30.773 に答える