2024年5月4日发(作者：)

js触发css3动画写法

在JavaScript中触发CSS3动画可以通过修改元素的CSS类或样式来实现。

下面是一个简单的示例，展示如何使用JavaScript触发一个CSS3动画：

首先，假设我们有一个CSS样式定义了一个动画：

```css

keyframes example {

0% {background-color: red;}

50% {background-color: blue;}

100% {background-color: green;}

}

.animate {

animation-name: example;

animation-duration: 4s;

}

```

然后，我们可以在JavaScript中添加或删除这个类来触发动画：

```javascript

// 获取元素

var element = ('myElement');

// 添加动画类，触发动画

('animate');

// 在动画结束后移除动画类，防止重复触发

('animationend', function() {

('animate');

});

```

在这个例子中，我们首先获取了ID为`myElement`的元素，然后使用`()`方

法添加了`animate`类，这将触发CSS中定义的动画。然后，我们添加了一

个事件监听器，当动画结束时（`animationend`事件被触发），我们将

`animate`类从元素中移除，防止动画重复触发。