This feature will allow adding animations directly through CSS code. Currently adding animations is possible only with JS(TypeScript) code. Making this feature available will separate the animation logic from the application one and the process of adding new animations will be easier. Moreover, it will be theoretically easy to use existing CSS3 animation libraries (e.g. animate.css). Adding support for CSS pseudo selectors will streamline the process of triggering animations by adding visual states (e.g. button1:highlighted).

In order to add initial support for CSS animations, the following CSS properties should be supported:

• animation
• animation-name
• animation-delay
• animation-duration
• animation-iteration-count
• animation-timing-function
• @Keyframes

The following animation properties could be implemented at later stages:

• animation-direction
• animation-fill-mode

In addition to animation properties, the following CSS property should be supported:

• transform

Currently only the following properties are animatable in {N}:

• opacity
• backgroundColor
• scaleX
• scaleY
• translateX
• translateY
• rotate

Example:

.button1 {
    background-color: white;
}

.button1:highlighted {
    animation-duration: 0.75s;
    animation-name: test;
}

@keyframes test {
from { background-color: red; }
  to { background-color: white; }
}

CSS animations can be improved further by implementing #1894 and #1895