# How to use css transitions in aurelia-animator-css?

**URL:** <https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827>\
**Category:** Framework Knowledge\
**Created:** [October 30, 2018, 9:06am UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827 "2018-10-30T09:06:12Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [October 30, 2018, 9:06am UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/1 "2018-10-30T09:06:12Z")

</div>

Based on Mr @EisenbergEffect [post](https://aurelia.io/blog/2015/07/17/animating-apps-with-aurelia-part-1/) we cannot use CSS `transitions` with [aurelia-animator-css](https://github.com/aurelia/animator-css).

> Please note that the CSS-Animator only supports animations through the `animation` property and NO `transitions`.

Why does exist this limitation?

I think most the time using transitions is so easier than animations. It would be great if we have this feature in Aurelia vNext.

What do you think?!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [October 30, 2018, 10:52am UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/2 "2018-10-30T10:52:04Z")

</div>

Hi @HamedFathi,

the reason for that is that we cant effectively detect when a transition has ended. Animations fire a `animationstart` [event](https://github.com/aurelia/animator-css/blob/master/src/animator.js#L260) which we can listen for and that way maintain a nice workflow of properly adding/removing classes on time.

One of the reason we sticked with this is that it provides the bare minimum, that is also supported by ancient browsers. More modern approaches would be likely starting to use [the web animations API](https://caniuse.com/#feat=web-animation), which sadly though still isn’t that supported as it should be after all those years. Also the css animator is a bare minimum implementation for simple anims. If you’re looking for other implementations take a look at Velocity or try creating your own adapter for other libraries such as GSAP etc.

---

<div class="post-metadata">

**Author:** ![EisenbergEffect](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/eisenbergeffect/32/2655_2.png) [@EisenbergEffect](https://discourse.aurelia.io/u/EisenbergEffect)\
**Post date:** [October 30, 2018, 6:24pm UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/3 "2018-10-30T18:24:06Z")

</div>

Would it be possible to use this? [https://developer.mozilla.org/en-US/docs/Web/Events/transitionend](https://developer.mozilla.org/en-US/docs/Web/Events/transitionend)

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [October 31, 2018, 5:35am UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/4 "2018-10-31T05:35:25Z")

</div>

Likely yes, the issue is the starting event, since it has a very low level of compatibility.

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [October 31, 2018, 7:45am UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/5 "2018-10-31T07:45:33Z")

</div>

@zewa666

> If you’re looking for other implementations take a look at Velocity or try creating your own adapter for other libraries such as GSAP etc.

I know that but I prefer pure CSS.

About `transitionend` as Mr @EisenbergEffect mentioned Can you check this link?

[transition-start](https://github.com/t10ko/transition-start)

I am not good at this topic but It can be a polyfill beside `aurelia-animate-css`.

Or [Detecting transition start](https://www.madebymike.com.au/writing/detecting-transition-start/)

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [October 31, 2018, 12:26pm UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/6 "2018-10-31T12:26:59Z")

</div>

If you could create an issue and link a minimal example with a transition (and Animation to show the wished behavior) that would help me tremendously to try adding this feature

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [October 31, 2018, 3:16pm UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/7 "2018-10-31T15:16:26Z")

</div>

@zewa666

As you asked me [ISSUE](https://github.com/aurelia/animator-css/issues/68)  
But I’m not optimistic the sample is so tricky. I do not think it can be used for all scenarios.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [October 31, 2018, 5:00pm UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/8 "2018-10-31T17:00:06Z")

</div>

OK but what would be a minimal example you want to work using transitions? Its just easier having to work against a goal so I know whether it works or not

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [November 4, 2018, 6:26am UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/9 "2018-11-04T06:26:26Z")

</div>

I have not specific problem for now.

But I am just wondering how `Vue` support all possible combinations even transitions?

[Vue Enter/Leave & List Transitions](https://vuejs.org/v2/guide/transitions.html)

Do you know about their techniques?

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 4, 2018, 9:22am UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/10 "2018-11-04T09:22:07Z")

</div>

Oh ok thought there is something specific you wanted to make sure it works. Thanks for the link i’ll check their implementations

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [November 4, 2018, 10:54pm UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/11 "2018-11-04T22:54:50Z")

</div>

Here is your goal. Replicate this. I know I could do a timer the same as the animation to get close, but I would like something a little more native.

> <https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/blob/master/src/angular-bootstrap-md/collapse/collapse.component.ts>

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [November 27, 2018, 2:58pm UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/12 "2018-11-27T14:58:56Z")

</div>

Bumping this. I would really like an example of how this could be done, or how we can get this done in vNext.

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [November 27, 2018, 9:13pm UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/13 "2018-11-27T21:13:49Z")

</div>

@bigopon Can you help us out here?

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [December 3, 2018, 12:33pm UTC](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827/14 "2018-12-03T12:33:22Z")

</div>

@brandonseydel what you described would be great although doesnt fit the current solution, which merely adds/removes classes at given timeslots. Your advised solution would have to be baked into templating and binding and offer a proper animation lifecycle. Which frankly would be cool. Im just not dealing with anims at all the last few months so I cant put time aside for that. I’d be super happy if somebody volunteers to take over the animation part of Aurelia. I can do the best to offer ideas and hints then