Comments (4)
Not really possible, you won't get the animations from that element if they're not already applied, and the request here is for a way to apply an effect on an element that has no animations applied to it.
I don't think there's any way now to refer to a keyframes rule by it's name from Web Animations, and I think it would be nice to be able to do so. E.g. be able to play effects ad-hoc from a library that's already prerenderred to the document's style.
I can think of two APIs that could help here:
- Referencing a keyframe object by name where a keyframe object param is accepted.
- A way to get a map of enumerated keyframe objects by their name.
from csswg-drafts.
I think you should use element.getAnimations()
:
const box = document.querySelector(".box");
function playAnimation({ effect, id }) {
if (id !== 'colorChange') return
const keyframes = effect.getKeyframes();
const options = {
duration: 2000,
iterations: 1,
};
effect = new KeyframeEffect(box, keyframes, options);
const animation = new Animation(effect);
animation.play();
}
box.getAnimations().forEach(playAnimation);
from csswg-drafts.
I think you should use
element.getAnimations()
:
The element.getAnimations()
method returns only the scheduled or running animations on the element. Even if you've applied an animation to an element in CSS using animation
property, once the animation completes you can't get reference of it using the getAnimations()
method.
My issue is that Web Animation APIs work with POJO inputs and current CSS API returns objects like CSSKeyframesRule. Objects returned by CSS APIs are not compatible with Web Animation APIs.
What I am asking is that
a. either the CSSKeyframesRule class to have a deserialize()
like method that will return Web Animation compatible plain objects
b. or the Web Animation API to accept CSS API returned objects.
This will save us from converting a lot of animations defined in CSS to JS. And it will keep the CSS stylesheet animations relevant in the long run.
- Referencing a keyframe object by name where a keyframe object param is accepted.
👍 This would be the best thing as it would save us from retrieving and converting the keyframes.
- A way to get a map of enumerated keyframe objects by their name.
This is nice to have, but the returned objects need to be compatible with the Web Animations API.
from csswg-drafts.
This is nice to have, but the returned objects need to be compatible with the Web Animations API.
Well, naturally.
I think this method is a common pattern when working with an animation library and it would be nice for the platform to allow that pattern.
from csswg-drafts.
Related Issues (20)
- [selectors] Parameterized selectors HOT 16
- [css-view-transitions-2] (feature) access view-transition snapshot as an image/ImageData HOT 9
- [scroll-animations] Allow smooth animation from lvh to svh
- [css-color-5]: Relative Colors doesn’t work with `calc(l + 10%)` HOT 1
- [css-color-5]: light-dark() doesn’t work with Relative Colors HOT 2
- Two "variants" of `color-mix()` ?? HOT 4
- [css-animations-2][web-animations-2] (proposal) Add pointer driven animations
- [css-values-5] Should `interpolate-size` be a new value to animation/transition-behavior? HOT 8
- CSS Color; light-dark() should be applicable on more properties. HOT 12
- [css-color-4] Evaluate static gamut mapping algorithms for oklab/oklch spaces HOT 4
- [css-easing-2] Linear easing function requires at least two points? HOT 3
- [scroll-animations-1] Consider adding a timeline range that takes ink overflow into account
- [scroll-animations-1][css-animations-1] A non-animated "Is in viewport" HOT 4
- [css-ui-4] Add `outline-offset-(inline|block)[-(start|end)]`
- [css-view-transitions-2] Capture modes HOT 1
- [css-view-transitions-1] Consider a wider margin from viewport than 0 for offscreen elements
- [css-tables] block size distribution to table sections not interoperable
- [css-tables] Distribution of block size to table sections not interoperable. HOT 4
- [css-scrollbars] Scrollbar Hover/Interaction Colors HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from csswg-drafts.