# Onclick rotation animation

**URL:** <https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364>\
**Category:** General Discussion\
**Tags:** perspective, ignition81\
**Created:** [November 2, 2023, 10:10am UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364 "2023-11-02T10:10:34Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [November 2, 2023, 10:10am UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/1 "2023-11-02T10:10:34Z")

</div>

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

```auto
{
  "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.

Thanks

---

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [November 3, 2023, 8:47am UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/2 "2023-11-03T08:47:38Z")

</div>

Any inputs will be appreciated.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [November 3, 2023, 10:37am UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/3 "2023-11-03T10:37:52Z")

</div>

This topic has been discussed before.

[https://forum.inductiveautomation.com/search?q=Icon%20rotation%20](https://forum.inductiveautomation.com/search?q=Icon%20rotation%20)

---

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [November 3, 2023, 10:45am UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/4 "2023-11-03T10:45:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [November 3, 2023, 10:50am UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/5 "2023-11-03T10:50:19Z")

</div>

Remove infinite.

---

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [November 3, 2023, 10:53am UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/6 "2023-11-03T10:53:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kyler.kamyszek](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@kyler.kamyszek](https://forum.inductiveautomation.com/u/kyler.kamyszek)\
**Post date:** [November 3, 2023, 11:50am UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/7 "2023-11-03T11:50:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [November 3, 2023, 12:08pm UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/8 "2023-11-03T12:08:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [November 3, 2023, 12:27pm UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/9 "2023-11-03T12:27:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kyler.kamyszek](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@kyler.kamyszek](https://forum.inductiveautomation.com/u/kyler.kamyszek)\
**Post date:** [November 3, 2023, 12:28pm UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/10 "2023-11-03T12:28:49Z")

</div>

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.

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

```

These post should help as well.

> [@Icon Transition Animation](https://forum.inductiveautomation.com/t/icon-transition-animation/64398):
>
> I am looking to recreate this Icon animation, I have figured out other animations and transitions in CSS. [Screen Recording 2022-09-22 at 2.39.23 PM] I have tried adding a transition: 1s linear on the buttons props.image.icon.style but it doesn’t seem to capture it. Any ideas?

> [@Moving Icon with CSS Animation](https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085/5):
>
> Out of curiosity, between the image loop, or something like a gif. Do you have any performance recommendations for putting something like Conveyors on a P&ID? I really liked the idea of using pipes, and just styling them to look like a conveyor, but that was before I realized I couldn’t style individual pipes outside of color. That would have been nice because it would have provided the SVG to the client as one large SVG, instead of the back and forth of many smaller ones.

---

<div class="post-metadata">

**Author:** ![Gulshan\_Negi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gulshan_negi/32/53208_2.png) [@Gulshan\_Negi](https://forum.inductiveautomation.com/u/Gulshan_Negi)\
**Post date:** [November 17, 2023, 2:57pm UTC](https://forum.inductiveautomation.com/t/onclick-rotation-animation/81364/11 "2023-11-17T14:57:01Z")

</div>

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

```auto

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

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

```

Thanks