JavaScriptでトランジション効果の速度曲線を設定するにはどうすればよいですか?
例
次のコードを実行して、JavaScriptで遷移効果の速度曲線を返すことができます-
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; margin: 10px; height: 300px; width: 400px; padding: 20px; border: 2px solid blue; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateY(45deg); transition: all 5s; } #div2:hover { background-color: orange; width: 50px; height: 50px; padding: 100px; border-radius: 50px; } </style> </head> <body> <p>Hover over DIV2</p> <button onclick = "display()">Set</button> <div id = "div1">DIV1 <div id = "div2">DIV2</div> </div> <script> function display() { document.getElementById("div2").style.transitionTimingFunction = "ease-in"; } </script> </body> </html>
-
JavaScriptで要素のマージンを設定するにはどうすればよいですか?
マージンを使用する JavaScriptのプロパティ。マージンを設定します。次のコードを実行して、JavaScriptで要素のマージンを設定してみてください- 例 <!DOCTYPE html> <html> <body> <button type="button" onclick="display()">Set all four margins</button> <p id=
-
CSSでトランジション効果の速度曲線を設定する方法
transition-timing-functionを使用します 遷移効果の速度曲線を設定するプロパティ。設定できる値は、ease、ease-in、ease-out、linearなどです。 例 次のコードを実行して、CSSで遷移効果の速度曲線を設定することができます- <!DOCTYPE html> <html> <head> <style> div {