Appearance

The Animations enable you to use their default styling options or to set custom CSS classes both to all wrapper Animation elements and to all their child elements.

Default CSS Classes

By default, the parent component renders a k-animation-container CSS class and the child component renders a k-child-animation-container CSS class. You can use these CSS classes to style the components without the need to specify separate CSS classes.

Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing the Styles

By using custom CSS classes, you can customize:

Decorating the Parent

To set a custom CSS class to the parent Animation component, use either:

  • The className property, or
  • The style property.
Example
View Source
Edit In Stackblitz  
Change Theme:

Decorating the Child

To set a custom CSS class to the child Animation element, use either:

  • The componentChildClassName property, or
  • The componentChildStyle property.
Example
View Source
Edit In Stackblitz  
Change Theme: