タグ付けされた質問 「css-animations」

opacity: 0;CSSで設定されているいくつかの要素でアニメーションを実行しています。アニメーションクラスはonClickに適用され、キーフレームを使用して、不透明度0を1（特に）に変更します。 残念ながら、アニメーションが終了すると、要素はopacity: 0（FirefoxとChromeの両方で）元に戻ります。私の自然な考え方は、アニメーション化された要素が最終的な状態を維持し、元のプロパティを上書きすることです。これは本当ではないですか？そうでない場合、どのようにして要素にそうさせることができますか？ コード（プレフィックスバージョンは含まれません）： @keyframes bubble { 0% { transform:scale(0.5); opacity:0.0; } 50% { transform:scale(1.2); opacity:0.5; } 100% { transform:scale(1.0); opacity:1.0; } }

301 css  css-animations 

現在、私はこのコードを持っています： @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } 点滅しますが、「一方向」にしか点滅しません。つまり、フェードアウトするだけで、で戻って表示されopacity: 1.0、その後再びフェードアウトし、再び表示されます... フェードアウトしてから、このフェードから再び「上昇」させて、に戻しopacity: 1.0ます。それは可能ですか？

288 html  css  css-animations  opacity 

JavaScriptを使用せずに、ページの読み込み時にCSS3遷移アニメーションを使用することは可能ですか？ これは私が望むものの一種ですが、ページの読み込み時に： http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html これまでに見つけたもの CSS3 transition-delay、要素への影響を遅延させる方法。ホバーでのみ機能します。 CSS3 Keyframe、ロード時に機能しますが、非常に遅いです。そのため役に立たない。 CSS3の移行は十分高速ですが、ページの読み込み時にアニメーション化しません。

195 css  webkit  css-transitions  css-animations 

クリックで再生する4部のCSS3アニメーションがありますが、アニメーションの最後の部分は画面からそれを取り除くことを目的としています。 ただし、再生すると、常に元の状態に戻ります。誰でも、最後のcssフレーム（100％）でそれを停止する方法、または再生後にdiv全体を削除する方法を知っています。 @keyframes colorchange { 0% { transform: scale(1.0) rotate(0deg); } 50% { transform: rotate(340deg) translate(-300px,0px) } 100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); } }

180 css  css-animations 

私はかなりの数のデモをレビューしましたが、CSS3スピンを機能させることができない理由がわかりません。Chromeの最新の安定版リリースを使用しています。 フィドル：http : //jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 40000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 40000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-transition: rotate(3600deg); } <div></div> コードスニペットを実行する結果を非表示スニペットを展開

158 css  css-animations 

そのため、CSS3トランジションとアニメーションの両方を実行する方法を理解しています。はっきりしないのは、私がググってみましたが、いつどれを使用するかです。 たとえば、ボールをバウンドさせたい場合は、アニメーションが最適です。キーフレームを提供すると、ブラウザが中間フレームを実行し、素晴らしいアニメーションが作成されます。 ただし、いずれの方法でも上記の効果が得られる場合があります。シンプルで一般的な例は、Facebookスタイルのスライド式ドロワーメニューを実装することです。 この効果は、次のような遷移によって実現できます。 .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ または、次のようなアニメーションを通じて： .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes sf-slideout { from { -webkit-transform: translate3d(0, 0, 0); …

155 css  css-transitions  css-animations 

JavaScriptやテキスト装飾を使用せずに、テキストの一部を旧式のスタイルに点滅させたいと思っています。 遷移なし、* blink *、* blink *、* blink *のみ！ 編集：これはその質問とは異なります。私は連続的な遷移なしで点滅を要求するのに対し、他の質問のOPは点滅を連続的な遷移で置き換える方法を尋ねます

149 html  css  css-animations  blink 

最近のGoogle Chromeの更新により、を実行した後にテキストが不鮮明になるようtransform: scale()です。具体的には私はこれをやっています： @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } Chromeでhttp://rourkery.comにアクセスすると、メインテキスト領域に問題が表示されます。これは以前は行われていなかったため、他のWebkitブラウザー（Safariなど）に影響を与えていないようです。3D変換で同様の問題が発生している人々に関する他の投稿がいくつかありましたが、このような2D変換については何も見つかりません。 どんなアイデアでも感謝します、ありがとう！

126 google-chrome  css  webkit  transform  css-animations 

2つのCSSアニメーションを異なる速度で再生するにはどうすればよいですか？ 画像は回転し、同時に拡大する必要があります。 回転は2秒ごとに循環します。 成長は4秒ごとに循環します。 コード例： .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite; } @-webkit-keyframes spin { 100% { transform: rotate(180deg); } } @-webkit-keyframes scale { 100% { transform: scaleX(2) scaleY(2); } } http://jsfiddle.net/Ugc5g/3388/-1つのアニメーション（最後に宣言されたもの）のみが再生されます。

116 css  css-animations 

この単純なことは簡単に達成できるはずですが、それがいかに複雑であるかについて、私は自分の髪を引き出しています。 私がやりたいのは、Reactコンポーネントのマウントとマウント解除をアニメーション化することだけです。これが私がこれまでに試したことと、それぞれの解決策が機能しない理由です： ReactCSSTransitionGroup -私はCSSクラスをまったく使用していません。すべてJSスタイルなので、これは機能しません。 ReactTransitionGroup-この下位レベルのAPIは優れていますが、アニメーションが完了したときにコールバックを使用する必要があるため、CSSトランジションを使用するだけでは機能しません。常にアニメーションライブラリがあり、次のポイントにつながります。 GreenSock-ライセンスは、ビジネスで使用するIMOには制限が多すぎます。 React Motion-これは素晴らしいようですが、 TransitionMotion私が必要とするものに対して非常に混乱し、過度に複雑です。 もちろん、マテリアルUIと同じように、要素はレンダリングされますが非表示のまま（left: -10000px）ですが、そのルートには行きたくありません。私はそれをハックだと考え、コンポーネントをアンマウントして、コンポーネントがクリーンアップされ、DOMが乱雑にならないようにします。 簡単なものが欲しいに実装。マウント時に、一連のスタイルをアニメーション化します。アンマウント時に、同じ（または別の）スタイルのセットをアニメーション化します。できました。また、複数のプラットフォームで高いパフォーマンスを発揮する必要があります。 ここでレンガの壁にぶつかった。何か足りないことがあり、これを行う簡単な方法がある場合は、お知らせください。

97 animation  reactjs  css-animations  greensock  react-motion 

CSSアニメーションプロパティを完了後も保持しようとしていますが、これは可能ですか？ これは私が達成しようとしていることです... 要素は、ユーザーがページに到達すると非表示になり、3秒後（または何でも）、フェードインし、アニメーションが完了するとそこにとどまります。 ここにフィドルの試みがあります... http://jsfiddle.net/GZx6F/ 保存用のコードは次のとおりです... <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style> 私はjQueryでこれを行う方法を知っています...それはこのようになるでしょう... <h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); </script>

92 css  css-animations 

省略記号をアニメーション化しようとしていますが、CSSアニメーションで可能かどうか疑問に思っていました... だからそれは Loading... Loading.. Loading. Loading... Loading.. そして基本的にはそのように続けます。何か案は？ 編集：このように：http：//playground.magicrising.de/demo/ellipsis.html

92 css  css-animations 

周りを見回しましたが、探しているものが見つかりません。 現在、ページに：hoverによってトリガーされるcssアニメーションがあります。メディアクエリを使用してページの幅が700pxを超えてサイズ変更された場合、これを「クリック」または「タッチ」に変更したいと思います。 これが私が現在持っているものです：http：//jsfiddle.net/danieljoseph/3p6Kz/ ご覧のとおり、：hoverはモバイルデバイスでは機能しませんが、ホバーではなくクリックするだけで同じように機能することを確認したいと思います。 可能であればcssを使用したいのですが、JQueryにも満足しています。 これはとても簡単にできると思いますが、非常に明白な何かが欠けています！どんな助けでもいただければ幸いです。 これがcssアニメーションです： .info-slide { position:absolute; bottom:0; float:left; width:100%; background:url(../images/blue-back.png); height:60px; cursor:pointer; overflow:hidden; text-align:center; transition: height .4s ease-in-out; -webkit-transition: height .4s ease-in-out; -moz-transition: height .4s ease-in-out; } .info-slide:hover { height:300px; }

84 css  css-animations 

CSSでジェットコースタースタイルのアニメーションを作成しようとしています。 「コースター」をループ段階でカーブさせる方法を知りたい。 私はすべてのCSSソリューションを探していますが、JavaScriptが少し必要な場合はそれで問題ありません。 これまでの私のコード： #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes loop { from { margin-left: -200px; } 30% …

15 html  css  css-animations  css-transforms