Using animation with CSS isolation requires special treatment

[mayur-ekbote]

Description

If you have an animation defined using keyframes then it will not work if it is specified as inline style.

Assume that the following styles are defined in an isolated css. Index.razor.css

.isolation-animated {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
}

@keyframes isolation-keyframes {
    from {
        top: 0px;
    }

    to {
        top: 200px;
    }
}

And the razor component is:

<div class="isolation-animated" style="animation: isolation-keyframes 5s infinite;"></div>

Then this animation will not work. This is because the isolated keyframe gets a suffix like the following during the build process.

@keyframes isolation-keyframes-b-ir289k6iqg {
    from {
        top: 0px;
    }

    to {
        top: 200px;
    }
}

This peculiar situation arises because unlike css classes, keyframe names can be used on the right hand side of the css value defined in style. There are two solutions to this

1. Use a custom css scope

<None Update="Components/Pages/Index.razor.css" CssScope="custom-scope-identifier" />

So the razor becomes:

<div class="isolation-animated" style="animation: isolation-keyframes-custom-scope-identifier 5s infinite;"></div>

2. Define keyframes globally.

I think adding this to the documentation will be useful for the devs who are learning about css isolation in blazor.

See the git repro for the original issue.

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-9.0

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/components/css-isolation.md

Document ID

39d464d9-aca6-34fa-7e52-5fde2e393ba7

Platform Id

518ba73d-7d61-b839-0b97-f417b8aa24a3

Article author

@guardrex

Metadata

• ID: 2703a48e-8b35-53fc-ac36-cfb395833077
• PlatformId: 518ba73d-7d61-b839-0b97-f417b8aa24a3
• Service: aspnet-core
• Sub-service: blazor

Related Issues

[github-actions]

🌱🐇 Spring is coming. Hang in there! I'm pull'in for ya! 🐣🌻

Stand-by! ... A green dinosaur 🦖 will be along shortly to assist.

[guardrex]

Great idea, @mayur-ekbote! I definitely would like to add this, and I thank you for providing details on how to cover it. I'll try to work this in soon ... within the next few days. See below 👇.

[guardrex]

On second thought, this isn't the best way to organize the styles generally for articles. We pitch just adding the animation to the class, where it will get picked up normally ...

.isolation-animated {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
    animation: isolation-keyframes 5s infinite;
}

<div class="isolation-animated"></div>

We don't really push inline styles all that much, and I don't see the need to dedicate a whole section to showing something that we don't generally recommend. Also, CssScope is already covered. Thanks anyway for pitching the idea.