私は人々が、とにかく私は、商用ウェブサイトへの直接リンクを入れて気にしませんが願って、私は本当にそれを記述することはできませんと私は考えているものの例があります。ボタンや要素をマウスの上に置いたときにアニメーション化するにはどうすればいいですか？
https://www.bladux.com/shared-hosting
ボトム付近には6つのdiv要素を持つセグメントがあり、それぞれの要素にマウスを重ねると同様の方法でアニメートされます。
最初はまだ静止画の背景画像がGIFに置き換えられていたと思っていましたが、onmouseleaveがonmouseleaveが発生した時点からアニメーションが完了した時点から何らかの形で "反転"していました。
私は技術的な観点から、誰かがこれをやり遂げる方法を知りたいと思います。具体的な例や例は必要ありません。私はGIFを過ぎて考えることはできません。
アニメーションを処理する最もクリーンな方法は純粋なCSSであるため、スタイリングロジックを使用してJavascriptコードを不必要にダウンさせることはありません。私の経験から、これらのことをCSSで処理できるのであれば、通常はそれが最良の解決策です。
Here's an exampleあなたが達成しようとしている基本的な効果を実装する方法。
ここで注目すべき重要な要素は、トランスフォームとトランジションです。 JSは必要ありません。
非常に役に立ちましたが、私はこれについて全く考えていませんでした。今私は、私が思っているより高度なものについては、これを拡大して展開する必要があります。また、CSSが＆：ホバーを追加できることを知っておくと、将来ファイルをクリーンアップするのに役立ちます！おかげで –
@PaulMcGlinchey注意：＆：ホバーは実際にはSassの機能です。 '＆'はネスティング（すなわち、親）における最も近いセレクタを表す。バニラCSSを使用している場合は、必ず「＆」を置き換えてください。それ以外の場合は、Sassを使用してください。それは素晴らしい。また、この回答があなたに役立った場合は、マークは正しいものです。 – wpcarro
これはホバーオーバー時にホバーに回転効果がある純粋なCSSです。あなたは、ここで "回転"を検索することで論理を見つけることができます：https://www.bladux.com/main/css/main.min.css –
これは少なくともあなた自身でこれをコード化しようとします。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –