Creating custom animations

[pieterdd]

Is there a recommended way to define custom animations? I tried creating one myself and including this in the page's stylesheet:

@keyframes ken-burns-test {
    to {
        transform: scale3d(1.05, 1.05, 1.05) translate3d(1%, -2%, 0);
    }
}

Then I set animation-names="ken-burns-test". Oddly enough the animation doesn't get used, possibly because the Ken Burns carousel is using a shadow DOM that - I assume - doesn't inherit any of its parent DOM's CSS rules.

[NeoLegends]

Hey,

you're right, the element doesn't inherit any rules and as such it's not possible to define custom animations right now.

I'm thinking about adding a property to the element, which you can assign CSS code to, that will be reflected into the elements styles, but this is rather hacky and I'd like to avoid that. I'd much rather have CSS Shadow Parts support here. You could also accomplish this with JavaScript yourself. Just get a reference to the DOM element, and work with it's .shadowRoot.

That said, which animation are you missing? We could just add it to the "official" set of animations, if it is general enough. :)

[pieterdd]

While I like the default animations, I wanted to tone them down to make the effect more subtle. I was thinking more along the lines of something like transform: scale3d(1.05, 1.05, 1.05) translate3d(1%, -2%, 0); for example. Ideally, there would be some kind of intensity attribute I could use to control the zoom amount with.

The JavaScript method sounds like the best option for me right now, thanks for that tip!

[NeoLegends]

You might be able to achieve what you want by configuring the transition duration, though. :) Another idea: we could add a separate toggle that sets animation speed independent from the transition duration.

[pieterdd]

A transition duration of 7 seconds per slide is already what I want, I just want the animation to be more subtle. So yes, an animation speed controller sounds good.

Or how about adding attributes to control the minimum and maximum zoom level? That would mean you'd have to write your animation CSS on the fly, but it would provide people with a way to have more control.