我试图在鼠标悬停时为四个div提供缩放效果。但是正在看到闪烁的效果。怎么克服这个？

Question

我有四个矩形框（myimage，myimage1，myimage2，myimage3）。最重要的是，我有一些内容可以写。我将它们视为div s，如果我悬停在它上面，它会显示闪烁效果。

<div class="row fourbox">
    <div id="myimage">
        <div class="one">
            <div class="col-sm-4 onefourth"><i class="fa fa-plug" aria-hidden="true"></i></div>
            <div class="col-sm-8 twofourth"> Motes <span id="spannum1">32</span></div>
        </div>
        <div class="two">
            <div class="col-sm-6 threefourth">Active Motes <span id="spannum2">15</span></div>
            <div class="col-sm-6 fourth"> Standby Motes <span id="spannum3">17</span></div>
        </div>
    </div>
    <div id="myimage1">
        <div class="one">
            <div class="col-sm-4 onefourth"><i class="fa fa-plug" aria-hidden="true"></i></div>
            <div class="col-sm-8 twofourth"> Sensors <span id="sensornum1">37</span></div>
        </div>
        <div class="two">
            <div class="col-sm-6 threefourth">Active Sensors <span id="sensornum2">20</span></div>
            <div class="col-sm-6 fourth"> Standby Sensors <span id="sensornum3">17</span></div>
        </div>
    </div>
    <div id="myimage2">
        <div class="one">
            <div class="col-sm-4 onefourth"><i class="fa fa-plug" aria-hidden="true"></i></div>
            <div class="col-sm-8 twofourth"> Network <span id="networknum1">98%</span></div>
        </div>
        <div class="two">
            <div class="col-sm-6 threefourth">Active Motes <span id="networknum2">30</span></div>
            <div class="col-sm-6 fourth"> Standby Motes <span id="networknum3">2</span></div>
        </div>
    </div>
    <div id="myimage3">
        <div class="one">
            <div class="col-sm-4 onefourth"><i class="fa fa-plug" aria-hidden="true"></i></div>
            <div class="col-sm-8 twofourth"> Coordinator <span id="coordnum1">5 Tx</span></div>
        </div>
        <div class="two">
            <div class="col-sm-12 threefourth">Coord Mac<span id="coordnum2">0x002334457742</span></div>
        </div>
    </div>
</div>

这是我的CSS：

#myimage, #myimage1, #myimage2, #myimage3 {
    border-radius: 5px;
    width: 200px;
    height: 150px;
    display: inline-block;
    margin-right: 56px;
}
#myimage {
    background-color: #da9e37;
}
#myimage1 {
    background-color: #be4932;
}
#myimage2 {
    background-color: #0f5b63;
}
#myimage3 {
    background-color: #af7973;
}

这是我的JavaScript代码：

function zoomOnHover(element, zoom, seconds) {
    var timeline = new TimelineLite({
        paused: true
    });
    timeline.to(element, seconds, {
        scale: zoom,
        ease: Elastic.easeOut
    });
    timeline.to(element, seconds, {
        scale: 1
    });
    element.onmouseover = function() {
        console.log("hover detected on " + element.id);
        timeline.restart();
    };
}
zoomOnHover(document.getElementById('myimage'), 1.15, 1);
zoomOnHover(document.getElementById('myimage1'), 1.15, 1);
zoomOnHover(document.getElementById('myimage2'), 1.15, 1);
zoomOnHover(document.getElementById('myimage3'), 1.15, 1);

我没有得到问题所在。我使用GreenSock框架来悬停效果。有谁可以帮我解决这个问题？