問題タブ [keyframe]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
6 に答える
117750 参照

css - CSS-テキストを左から右に移動する

Webサイトを前後にスクロールするアニメーションHTML「マーキー」を作成したいと思います。

およびCSS:

問題は、マーキーが画面の右端に達しても停止しないことです。画面から完全に移動し(水平スクロールバーが短時間表示されます)、その後戻ってきます。

では、マーキーの右端が画面の右端に達したときにマーキーを停止するにはどうすればよいですか?

編集:奇妙なことに、これは機能しません:

0 投票する
0 に答える
170 参照

css - 遷移キーフレームを使用したホバー時の CSS3 アニメーション

このアニメーションをより滑らかで魅力的なものにする必要があります。

デモ: http://jsfiddle.net/XeELs/210/

0 投票する
2 に答える
732 参照

html - 要素をアニメーション化して境界半径を失わないようにする方法は?

センターピースの画像に小さなアニメーションがあり、少しズームインしてから元のサイズに戻ります。

コードはこちら!

問題は、オーバーフローが隠されているにもかかわらず、アニメーションが親要素の境界線の半径を「上書き」することです。

何か案は?

0 投票する
1 に答える
2377 参照

actionscript-3 - キーフレーム データを After Effects からフラッシュにエクスポートする方法はありますか

After Effects でモーション トラッカーを使用して、オブジェクトのパスを追跡しました。X と Y のデータを取得して、フラッシュ内のオブジェクトにエクスポートしたいと考えています。これを行うための迅速かつ簡単な方法があることを願っていました。

0 投票する
1 に答える
2055 参照

css - CSSでMSWindowsPhoneTiltinアニメーションを再作成する

CSSアニメーションを使用して、私の小さなプロジェクトで「チルトイン」アニメーションを機能させようとしています。残念ながら、MSデモから移植することはできませんでした-間違いなくすべてのコードがあります:http://m.microsoft.com/windowsphone/en-us/demo/default.aspx#home

ページが読み込まれたときにタイルをフェードインさせようとしています。その部分だけです。一度は絶対に大丈夫です。ベンダーのキーフレームを定義する必要があることは理解していますが、私の試みは非常に貧弱であるため、jsFiddleの例ではそれらを貼り付けていません。

http://jsfiddle.net/qCQQD/2/

私を助けてくれる人はいますか?それは素晴らしいことを超えているでしょう!

編集1:

a)ページが読み込まれたときにrotateRightアニメーションを実行しようとしています。私はおそらく.tileクラスにleftRotateを含むハッキーなバージョンを持っていて、それはページロードで削除されました(そしてrightRotateが追加されました)。

b)これ

コードが追加されたためにChromeで非常に遅くなりましたが、どうすれば通常の状態に戻すことができますか?

#tileからなんらかの時間枠がかかると思います

今はスローモーションのようです。-webkit-transition:50msのようなものを追加してみます。(ええ、私は知っています、完全な初心者)。

0 投票する
2 に答える
9672 参照

javascript - animationName を介してどの AnimationEnd が起動したかを検出する

1 つの div にリンクされた複数の CSS3 アニメーションがありますが、関数を最後のアニメーションの最後に呼び出したいだけです。

上記の関数をトリガーできるように animationEnd イベントを使用しましたが、前述のように、最後のアニメーションでのみ実行したいのです。

animationEnd イベントをトリガーしたアニメーションの名前を確認して、アニメーションが終了したことを検出する方法はありますか?

したがって、if ステートメントを使用して最後のアニメーションを選び出すことができます。

0 投票する
1 に答える
6548 参照

http-live-streaming - Http LiveStreamingtsセグメントがキーフレームで始まらない

私はアップルのhttpライブストリーミングを使用してipad/iphoneにライブビデオをストリーミングすることに取り組んでいます。この重要なステップの1つは、プレイリストとともにトランスポートストリームを複数のtsセグメントにセグメント化することです。Appleのドキュメントによると、推奨されるtsセグメントの継続時間は10秒です。ただし、継続時間が長いほどレイテンシが長くなるため、この期間を2秒または1秒に短縮しようとしています。

Appleのドキュメントでは、キーフレームの境界間でセグメンテーションを実行する必要もあります。つまり、各tsセグメントはキーフレームで開始する必要があるため、独立して再生できます。ここに矛盾する部分があります。これはほとんど不可能であり、トランスポートストリームが1〜2秒ごとにキーフレームを持つことも無駄になります。だから私の質問は、tsセグメントがキーフレームで始まらない場合でもhttpライブストリーミングは機能しますか?

0 投票する
1 に答える
5614 参照

animation - このcss3バックグラウンドループジャンプを回避するにはどうすればよいですか?

私は最近いくつかの css3 を試しています。私がやろうとしているのは、背景画像を左にスライドさせてシームレスに繰り返し、無限の背景アニメーションの効果を与えることです (古い漫画で背景を何度もループさせるようなものです...)。このcss3で私が直面している問題は、アニメーションが完了すると、アニメーションが開始位置に戻ることです。ここを参照してください:私のブログ. アニメーションが完了すると、「super sluggy」というタイトルのエントリの背景が所定の位置に戻ります。私は w3schools で答えを探し、グーグルや関連するスタックの質問も調べましたが、どこにも解決策が見つかりません。これが私のコードです:

x 軸に沿って繰り返される場合、背景自体はシームレスですが、アニメーション化された場合、トランジションはすばやくスナップされ、シームレスにするか、ユーザーに気付かれないようにする必要があります。

これを修正する方法を知っている人はいますか?ありがとう!

0 投票する
1 に答える
11269 参照

ffmpeg - ffmpegキーフレーム抽出

私はffmpeg0.11.1を使用してビデオからキーフレームを抽出しようとしています。これまでに試したすべてのコマンドは、キーフレームを抽出しませんが、すべてのフレーム、つまり25fps*合計時間のフレーム数を出力に返します。keyint_minを25に設定して、1秒あたり1キーフレームの最大値があることを確認してみました。

ただし、それでもすべてのフレームが返されます。

次に、キーフレームを20秒離してみました。

再び同じ結果で、すべてのフレームが返されます。

私は何をすべきか?

0 投票する
2 に答える
1868 参照

html - CSS3アニメーションのFirefoxの背景画像

CSSでキーフレームアニメーションを作成しています。-webkit構文がサポートされているため、アニメーションはChromeで非常にうまく機能しているようです。

Firefox用に以下のコードを試しましたが、機能しません

FFでこれが機能することを教えてください。

これはCSSの部分です。

そしてこれはHTMLです