Skip to content
Ember implementation of CSS Transitions. Just like ng-animate and react animation but for Ember :)
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 9a95e2a Dec 30, 2019

Ember CSS Transitions Build Status Ember Observer Score

This addon provides a nice way of defining CSS Transitions for Ember Components. Which means, only css based animations for performance - and no animation library needed.

Ember CSS Transitions is heavily inspired (and CSS compatible) with:

Animations are completely based on CSS classes. As long as you have a CSS class attached to a HTML element, you can apply animations to it.


How it works

Utimately you define your animations and transitions with ONLY CSS.

.example-enter {
  opacity: 0.01;

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity .5s ease-in;
.example-leave {
  opacity: 1;

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity .5s ease-in;
<div {{css-transition "example"}}>
  <h1>Hello world</h1>

Check out the homepage for more detailed documentation:



ember install ember-css-transitions

Note Using ember-cli-autoprefixer is suggested for CSS transitions:

ember install ember-cli-autoprefixer

Tested in the following browsers / platforms:

  • IE 10
  • IE 11
  • Microsoft Edge
  • Chrome
  • Firefox
  • Safari
  • Android
  • iPhone

Note: IE9 does not support CSS3 transitions / animations. They must live with no animations / transitions.


  • git clone <repository-url> this repository
  • cd my-addon
  • npm install


  • npm run lint:hbs
  • npm run lint:js
  • npm run lint:js -- --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit


This project is licensed under the MIT License.

You can’t perform that action at this time.