Onclick rotation animation

I have an icon for which I have added below styles.

  "animation": "ia_symbolComponent__animate--rotate linear infinite",
  "animation-duration": "1000ms"

I want that when I click on the Icon it should rotate once and stop, with above script and not having much knowledge about CSS I am not able to find a solution.


Any inputs will be appreciated.

This topic has been discussed before.


1 Like

Yes I read and but it is for continuous rotation, I want it to rotate only once

Remove infinite.

I had removed infinite and put animation-iteration-count = 1
doesn't help

You will want to put the animation in a class in your sytlesheet.css file. Right click Styles to add it in your project.

Animations start when the view is loaded or you can toggle animation-play-state between "paused" and "running" (this really only works with infinite loops).

What you want to do is have two different classes with animations and switch between the two classes with a binding or script. The browser will see the change in the CSS and start the new animation. Look into keyframes as well.

1 Like

It helps and I made progress with it.
Could you guide little more on how I can make the animation complete 1 rotation and paused.

with ia_symbolComponent__animate--rotate linear forwards it is rotating once,
When I click on the Icon it should rotate once, but that is not working.

Here's a class example called spin that should work. Toggle your class of your components between this and None or another class without the animation in it.

.spin {
  "animation": "ia_symbolComponent__animate--rotate linear 1",
  "animation-duration": "1000ms"

These post should help as well.


Can you try the below script once and tell me accordingly?

    animation: rotate-once 1000ms linear;
    animation-fill-mode: forwards;

@keyframes rotate-once {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }