# CSS animation pause on condition of tag

**URL:** <https://forum.inductiveautomation.com/t/css-animation-pause-on-condition-of-tag/81474>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 3, 2023, 4:18pm UTC](https://forum.inductiveautomation.com/t/css-animation-pause-on-condition-of-tag/81474 "2023-11-03T16:18:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![joseph.hahn](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@joseph.hahn](https://forum.inductiveautomation.com/u/joseph.hahn)\
**Post date:** [November 3, 2023, 4:18pm UTC](https://forum.inductiveautomation.com/t/css-animation-pause-on-condition-of-tag/81474/1 "2023-11-03T16:18:31Z")

</div>

How can I pause a CSS animation in perspective based on the condition of a Boolean tag? I am doing a basic icon animation of the status of an extrusion press. TIA

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/1/117977de4529276650d92b1627387df4543d3aab.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [November 3, 2023, 5:50pm UTC](https://forum.inductiveautomation.com/t/css-animation-pause-on-condition-of-tag/81474/2 "2023-11-03T17:50:22Z")

</div>

Whichever component is being used should have `props.style.classes` is bound against the tag in question, where it has a binding like this:

```auto
if({[default]SomeTag} = <someValue>, "move", "")

```

Note that this binding would prevent the application of any _other_ classes for this component.

---

<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, 6:23pm UTC](https://forum.inductiveautomation.com/t/css-animation-pause-on-condition-of-tag/81474/3 "2023-11-03T18:23:12Z")

</div>

add "amination-play-state" to the component and toggle between 'paused' and 'running'