Hello,
I am using CSS animations in my project. After upgrading the Radzen Blazor Components to
version 11.x.x, the animations are not working any more. Also animations of Radzen Components as the IsLoading animation of the RadzenDataList is not working.
I have reverted now the components to version to 10.4.9. There are all animations of Radzen and third party components working.
DataGrid loading animation works normally in our demos:
Can you point us to some of the example where it doesn’t?
Busy + Animation not working v11 .Net10. / ServerSide
New RadzenStudio Project.
@page "/"
<head>
<style>
.ball-container {
width: 100px;
height: 300px;
position: relative;
margin: 50px auto;
}
.ball {
width: 60px;
height: 60px;
background: radial-gradient(circle at 30% 30%, #ff6b6b, #c92a2a);
border-radius: 50%;
position: absolute;
bottom: 0;
left: 20px;
animation: bounce 1s ease-in infinite;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
@@keyframes bounce {
0%, 100% {
transform: translateY(0);
animation-timing-function: ease-in;
}
50% {
transform: translateY(-200px);
animation-timing-function: ease-out;
}
}
/* Schatten-Animation für mehr Realismus */
.ball::after {
content: '';
position: absolute;
width: 60px;
height: 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
top: 210px;
left: 0;
animation: shadow 1s ease-in infinite;
}
@@keyframes shadow {
0%, 100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(0.5);
opacity: 0.3;
}
}
</style>
</head>
<PageTitle>Index</PageTitle>
<div class="ball-container">
<div class="ball"></div>
</div>
<RadzenRow Gap="5" RowGap="5">
<RadzenButton Text="Click" IsBusy="@IsBusy" Click="@(()=>IsBusy = !IsBusy)" />
<RadzenButton Text="Click" Click="@(() => IsBusy = !IsBusy)" />
</RadzenRow>
This works as expected in our playground.
You are probably using a premium theme which you have to update from Radzen Blazor Studio or Radzen Blazor for Visual Studio.
No, I have a Professional version and use Material.
Even in the https://blazor.radzen.com/button the animiation ist not working on the save button!
Here is what I see on https://blazor.radzen.com/button - animation works in both Material3 and Material themes. Which browser are you using? Did you try clearing your cache?
Sorry i cant upload a video.
Yes i have cleared the cache (Ctr+F5 and Deveoloper Mode Clear Cache), i have tried it with Chrome and Edge but no anmination ist shown. ( Win11)
The Button IsBusy just shows the circle, the Skeletton does not show wave animation and none of css animations are running. If i copy my code into the playground same issue.
I have tried a new project winth radzen studio ServerSide / Radzen V11 / .Net10. If i use the 10.XXX everything is fine. It must be something wrong with the v11.
Here is your updated demo in the playground and how it renders in Edge:
Can you check in the browser devtools if there are any CSS parse errors / JS errors or other problems reported? I wonder if for some reason the CSS fails to parse for some reason. Also did you try in incognito mode?
We may have found the cause of the problem - it is this CSS which was supposed to be accessibility improvement:
// Accessibility: honor the user's OS "reduce motion" preference.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
transition-timing-function: linear !important;
animation-duration: 0.01ms !important;
animation-timing-function: linear !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
You probably have this setting enabled hence all animations stopped. We decided to revert this change as it is too obtrusive. A new version 11.0.5 has been released which addresses this issue.
Thanks, great job 
I can also confirm that the animations are working again after upgrading to 11.0.5.
Great job!