css-animations

1熱

1答えて

私はCSSアニメーションを使ってキューブの回転をアニメーション化しようとしています。一定の時間、各面で一時停止しています。 GoogleのChromeとエッジで Pen here @keyframes frontToLeft { 75% { transform: rotateY(0); } 100% { transform: rotateY(90deg); }

1熱

1答えて

CSSでローテーションアニメーションを遅くするにはどうすればいいですか？

私はこの世界の画像を回転させる回転キーフレームを持っている：これによって呼び出され @keyframes App-world-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ：私は遅くしたい： .App-world {

2熱

2答えて

CSSアニメーション/エッジ

どのようにすることができますIE /エッジでこの事の仕事？なぜ私は理解していない。 iは、その境界が破線回転開始となる要素にクラスを追加します。 $("#btn").click(function() { $(".bg")[0].classList.toggle("rotate"); }) @keyframes PDFgenerating { to {

2熱

2答えて

CSS - 背景位置アニメーションの調整

コンテンツの読み込み中に表示するプレースホルダ表示を作成しようとしています。私は、グラデーションの中間点をイラストレーションの目的で黒に変更しました（これは、プロダクションではより明るいグレーです）。灰色のボックス全体で同じサイズになり、トランジションのすべてのポイントですべてのボックスに揃えられるように、グラデーションを調整することが目的です。現在のところ、アニメーションは<div>のサイズ

3熱

2答えて

疑似キーフレームアニメーションが機能しない

私はキーフレームが初めてで、wordpressの疑似要素でアニメーションを実行しようとしています。私はそれが働いていない理由を解決できません。私は似たような質問やフォーラムを読んだことがあるが、役に立たない。私は実際には左右に動こうと思っていますが、テストするためにスピンキーフレームをつかみました。私がしようとしたコードは次のとおりです。私はそれが問題だったかもしれないと思ったし、疑似クラス

2熱

1答えて

ページがお互いに変化したときにアニメーションを追加する方法は？

私はボタンを押した後、ページをゆっくりと変化させる方法を模索しています。 jQueryを使わずにJSだけを使いたい。今私はブロックを変更するスクリプトを持っていますが、私はdisplay noneを使います。私はこれでゆっくりと変化するページを加えることができるとは確信していません。私はtramsformプロパティを使用するためにtryiedしかし、うまくいきません。私はオーバーフローする必要はあ

1熱

2答えて

このCSSアニメーションのチェーンは無限に実行する必要がありますが、

私は無期限に実行したいこの簡単なCSSアニメーションセットを持っています。しかし何らかの理由で、2回実行して停止します。はここでここでCodePen example. だ、私はjQueryのを使用してそれを実装する方法である（これはまた、コードの上に見られている） $('#slide1').one(animationEnd,() => { $('#slide1').css('displ

0熱

1答えて

私はアニメーションの速度を遅くしたい

ここで私は単純なdivをアニメーション化している私のコードです。しかし、問題は、突然点滅して縮小することがわかるように、Xがフルサイズに成長したときの速度を遅くしたいと思っています。誰かが私を助けることができますか？ html { background: black; overflow: hidden; height: 100%; }

0熱

1答えて

ボタンを押した後にページを左または右に移動する方法（アニメーション）？

私はすべてのページを左、右、上、下に移動する方法を模索しています。すべてがダウンとアップで大丈夫です。右と左は私が望むようにexectly仕事をしません。ページ間に空白があります。私はすべてのページを大きな容器に入れました。私は3つの小さな容器（フレックス表示）を使用します。私はすべてのページを隠した。私たちが見ることができるのは1人だけです。私たちが上下に動くと、次の（最後の）容器の拳の子供が見

0熱

1答えて

CSS- KeyFrameが無効なプロパティ値

ここで私が直面していることはわかりませんが、CSSアニメーションを適用しようとしています。いくつかの調査を行った後、webkit接頭辞を追加すると解決策に役立つと思っていましたが、無効なプロパティ値を読み取っているところに問題が残っているようです。は、ここに私の現在のコードです： .progress-status.complete { width: 0%; -webkit-