在 javascript 中更改 css 动画

Question

I have a blinking red box in my html it uses css animations.我的 html 中有一个闪烁的红色框，它使用 css 动画。 I want to to be able to change it from blinking red and white to green and white.我希望能够将它从闪烁的红色和白色变为绿色和白色。 I know this can be done on id elements by using getElementbyId but how would get access to the green aminated box in the css.我知道这可以通过使用 getElementbyId 在 id 元素上完成，但是如何访问 css 中的绿色胺化框。 The red box looks like this:红色框看起来像这样：

@-webkit-keyframes 'noConnection' 
{
    1% { background-color: red; }
    33% { background: white; }
    66% { background: red; }
    100% { background: white; }
}

The green is this:绿色是这样的：

@-webkit-keyframes 'Connection' 
{
    1% { background-color: green; }
    33% { background: white; }
    66% { background: green; }
    100% { background: white; }
}

The animate looks like this:动画看起来像这样：

#animate { 
    height: 15px; 
    width: 15px;
}
.cssanimations #animate {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: Connection;
    -webkit-animation-timing-function: ease;

and I think I have to change the attribute -webkit-animation-name: from javascript to do this but I dont know how to get a handle on it to change it.我想我必须更改属性-webkit-animation-name: from javascript 才能做到这一点，但我不知道如何处理它来更改它。 Or would I be better off creating a duplicate #animate and renaming it using the getElementById?或者我最好创建一个重复的#animate并使用getElementById 重命名它？

Answer 1

The easiest way to do this is to created two classes in CSS and then toggle between the two.最简单的方法是在 CSS 中创建两个类，然后在两者之间切换。

So something like:所以像：

.connection {
  animation: 'Connection' 5s ease infinite
}


.no-connection {
  animation 'noConnection' 5s ease infinite
}

And then use Javascript to toggle between the two然后使用Javascript在两者之间切换

function toggleConnectionStatus(){
 var element = document.getElementById('animate');
 if(/* connection is active */) element.className = 'connection';
 else element.className = 'no-connection'

}

Answer 2

Here is a simple web page that demonstrates how to use Javascript to modify a CSS animation.这是一个简单的网页，演示了如何使用 Javascript 修改 CSS 动画。 It contains a simple div, and a little Javascript causes the div to move randomly around the page.它包含一个简单的 div，一点点 Javascript 会使 div 在页面上随机移动。

In your specific case, you just need to touch up the line that calls "insertRule" to insert your new blinking rule.在您的特定情况下，您只需要修改调用“insertRule”的行以插入新的闪烁规则。

<html><head><style></style></head>
<body>
    <div id="mymovingdiv">
        <h1>Moving Div</h1>
        <p>And some little text too</p>
    </div>

<script>
function animatedMove(id, xStart, yStart, xEnd, yEnd, secs)
{
    // Remove any CSS rules inserted by a previous call to this method
    let rulename = `AnimMove${id}`;
    let ss = document.styleSheets; // all stylesheets
    for (let i = 0; i < ss.length; ++i) { // for each stylesheet...
        for (let j = ss[i].cssRules.length - 1; j > 0; j--) { // for each rule...
            if (ss[i].cssRules[j].name === rulename) { // does the name match?
                ss[i].deleteRule(j);
            }
        }
    }

    // Insert a CSS rule for this animation
    document.styleSheets[0].insertRule(`@keyframes ${rulename} { 0% { left: ${xStart}px; top: ${yStart}px; } 100% { left: ${xEnd}px; top: ${yEnd}px } }`);

    // Remove any CSS rules inserted by a previous call to this method
    for (let i = 0; i < ss.length; ++i) { // for each stylesheet...
        for (let j = ss[i].cssRules.length - 1; j > 0; j--) { // for each rule...
            if (ss[i].cssRules[j].name === rulename) { // does the name match?
                ss[i].deleteRule(j);
            }
        }
    }

    // Insert a CSS rule for this animation
    document.styleSheets[0].insertRule(`@keyframes ${rulename} { 0% { left: ${xStart}px; top: ${yStart}px; } 100% { left: ${xEnd}px; top: ${yEnd}px } }`);

    // assign the animation to our element
    let el = document.getElementById(id);
    el.style.position = 'absolute';
    el.style.animation = `${rulename} ${secs}s`;

    // Make the element stay where the animation ends
    el.style.left = `${xEnd}px`;
    el.style.top = `${yEnd}px`;

    // Re-clone the element, to reset the animation
    el.parentNode.replaceChild(el.cloneNode(true), el);
}

let x = 0;
let y = 0;

function randomMove()
{
    let newX = Math.floor(Math.random() * 800);
    let newY = Math.floor(Math.random() * 600);
    animatedMove('mymovingdiv', x, y, newX, newY, 1);
    x = newX;
    y = newY;
}

setInterval(randomMove, 1000);
</script>
</body>
</html>

在 javascript 中更改 css 动画

问题描述

2 个解决方案

解决方案1
0 2015-03-31 18:48:20

解决方案2
0 2021-03-10 17:51:11

在 javascript 中更改 css 动画

问题描述

2 个解决方案

解决方案1 0 2015-03-31 18:48:20

解决方案2 0 2021-03-10 17:51:11

解决方案1
0 2015-03-31 18:48:20

解决方案2
0 2021-03-10 17:51:11