Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

Animations

Animations Classes

The intended use of this is in content block components. Developers can add the class of .rc-animation-001--base to all content block components and apply the .rc-animation-001--active as needed to produce a subtle fade in effect. Developers can choose how/when to apply the .rc-animation-001--active class.

base
<div class="rc-padding--sm rc-animation-001--base">base</div>

Copied!

active
<div class="rc-padding--sm rc-animation-001--base rc-animation-001--active">active</div>

Copied!