Запустить css анимацию через js

Element: animate() method

The Element interface’s animate() method is a shortcut method which creates a new Animation , applies it to the element, then plays the animation. It returns the created Animation object instance.

Note: Elements can have multiple animations applied to them. You can get a list of the animations that affect an element by calling Element.getAnimations() .

Syntax

Parameters

Either an array of keyframe objects, or a keyframe object whose properties are arrays of values to iterate over. See Keyframe Formats for more details.

Either an integer representing the animation’s duration (in milliseconds), or an Object containing one or more timing properties described in the KeyframeEffect() options parameter and/or the following options:

A property unique to animate() : A string with which to reference the animation.

Specifies the end of an animation’s attachment range along its timeline, i.e. where along the timeline an animation will end. The JavaScript equivalent of the CSS animation-range-end property. rangeEnd can take several different value types, as follows:

 rangeName: 'entry', offset: CSS.percent('100'), > 

Specifies the start of an animation’s attachment range along its timeline, i.e. where along the timeline an animation will start. The JavaScript equivalent of the CSS animation-range-start property. rangeStart can take the same value types as rangeEnd .

A property unique to animate() : The AnimationTimeline to associate with the animation. Defaults to Document.timeline . The JavaScript equivalent of the CSS animation-timeline property.

Return value

Examples

Rotating and scaling

In this example we use the animate() method to rotate and scale an element.

HTML

div class="newspaper">Spinning newspaperbr />causes dizzinessdiv> 

CSS

html, body  height: 100%; > body  display: flex; justify-content: center; align-items: center; background-color: black; > .newspaper  padding: 0.5rem; text-transform: uppercase; text-align: center; background-color: white; cursor: pointer; > 

JavaScript

const newspaperSpinning = [  transform: "rotate(0) scale(1)" >,  transform: "rotate(360deg) scale(0)" >, ]; const newspaperTiming =  duration: 2000, iterations: 1, >; const newspaper = document.querySelector(".newspaper"); newspaper.addEventListener("click", () =>  newspaper.animate(newspaperSpinning, newspaperTiming); >); 

Result

Down the Rabbit Hole demo

In the demo Down the Rabbit Hole (with the Web Animation API), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. Notice the array of objects passed as keyframes and also the timing options block.

.getElementById("tunnel").animate( [ // keyframes  transform: "translateY(0px)" >,  transform: "translateY(-300px)" >, ],  // timing options duration: 1000, iterations: Infinity, >, ); 

Implicit to/from keyframes

In newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. For example, consider this simple animation — the Keyframe object looks like so:

let rotate360 = [ transform: "rotate(360deg)" >]; 

We have only specified the end state of the animation, and the beginning state is implied.

timeline, rangeStart, and rangeEnd

Typical usage of the timeline , rangeStart , and rangeEnd properties might look like this:

const img = document.querySelector("img"); const timeline = new ViewTimeline( subject: img, axis: "block", >); img.animate(  opacity: [0, 1], transform: ["scaleX(0)", "scaleX(1)"], >,  fill: "both", duration: 1, timeline, rangeStart: "cover 0%", rangeEnd: "cover 100%", >, ); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

How to Trigger CSS Animations in JavaScript?

Sometimes, we want to trigger CSS animations in JavaScript.

In this article, we’ll look at how to trigger CSS animations in JavaScript.

Trigger CSS Animations in JavaScript

To trigger CSS animations in JavaScript, we just add the class that is set to animate the keyframes in CSS.

Then we add animation with:

@keyframes circle1 < from < background-color: red; >to < background-color: yellow; >> @keyframes circle2 < from < background-color: red; >to < background-color: yellow; >> .circle_ani1, .circle_ani2 < animation-duration: 1s; animation-iteration-count: 1; >.circle_ani1 < animation-name: circle1; >.circle_ani2

We add the @keyframes property with the animation we want to animate.

It’ll animate from the from styles to the to styles.

Then we set the animation-name to the keyframes we want to animate within the class selectors.

const tempCircle1 = $('.TimeCountdown_circle1').removeClass('circle_ani1'); const tempCircle2 = $('.TimeCountdown_circle2').removeClass('circle_ani2'); window.setTimeout(() => < tempCircle1.addClass('circle_ani1'); tempCircle2.addClass('circle_ani2'); >, 50); 

to remove the circle_ani1 and circle_ani2 classes with jQuery’s removeClass after we select them.

Then we call addClass to add the classes to the elements.

Conclusion

To trigger CSS animations in JavaScript, we just add the class that is set to animate the keyframes in CSS.

Источник