js控制 @keyframes,实现鼠标移入移出无卡顿效果

var style = document.styleSheets[0];
console.log(style)
document.styleSheets这个接口可以获取网页上引入style样式表。

拿到样式表后就可以操作样式啦~
insertRule方法用来给当前样式表插入新的样式规则。

style.insertRule("@keyframes onbox" + num + "{0%{ width:100px;}100%{ width: 400px}}", 3);

insertRule(rule,index)
rule:要添加到样式表的规则。
index:要把规则插入或附加到 cssRules 数组中的位置。

js既然可以添加 @keyframes 样式了，那动态传值就方便啦！

附实战笔记一篇

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 4px solid #0aa2fa;
            overflow: hidden;
        }
        
        .box img {
            width: 300px;
            height: 300px;
        }
        
        @keyframes onbox {
            0% {
                width: 300px;
                height: 300px;
                margin: 0;
            }
            100% {
                width: 400px;
                height: 400px;
                margin: -50px;
            }
        }
        
        @keyframes offbox {
            0% {
                width: 400px;
                height: 400px;
                margin: -50px;
            }
            100% {
                width: 300px;
                height: 300px;
                margin: 0;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="https://t1.shijianpro.com/Public/20200210/sj-4984239731.png" data-num="0" alt="">
    </div>
    <script src="https://www.shijianpro.com/Public/js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).on("mouseenter", ".box", function() {
            var mouseenterwidth = Number($(".box img").width()); //获取图片宽度
            var num = $(".box img").attr("data-num");
            var style = document.styleSheets[0];
            console.log(style)
                //获取偏移量 设置margin
            var margin = Number(mouseenterwidth - 300);
            var margin_on = Number(margin / 2);
            console.log(margin_on)
                //margin获取完成
            style.insertRule("@keyframes onbox" + num + "{0%{ width: " + mouseenterwidth + "px;height:" + mouseenterwidth + "px; margin:-" + margin_on + "px;}100%{ width: 400px;height: 400px;margin:-50px;}}", 3);
            $("img").css({
                "animation": "onbox" + num + " 1s",
                "animation-fill-mode": "forwards",
            });
            $(".box img").attr("data-num", num + 1);
        });
        $(document).on("mouseleave", ".box", function() {
            var num = $(".box img").attr("data-num");
            var mouseleavewidth = $(".box img").width();
            //获取偏移量 设置margin
            var margin = Number(mouseleavewidth - 300);
            var margin_on = Number(margin / 2);
            console.log(margin_on)
                //margin获取完成
            var style = document.styleSheets[0];
            style.insertRule("@keyframes offbox" + num + "{0%{ width: " + mouseleavewidth + "px;height:" + mouseleavewidth + "px;margin:-" + margin_on + "px; }100%{ width: 300px;height: 300px;margin:0px;}}", 4);
            $("img").css({
                "animation": "offbox" + num + " 1s",
                "animation-fill-mode": "forwards",
            });
            $(".box img").attr("data-num", num + 1);
        });
    </script>
</body>

</html>