AngularLynx

    Animations

    Three ways to animate on Lynx: a CSS transition, a CSS @keyframes animation and the element.animate() API.

    animationssrc/app/app.ts

    What it shows

    • A CSS transition — toggling [class.transition-active] animates the box's background color through transition: background-color 0.5s. See Animations.
    • CSS @keyframes — adding the spinning class starts an endless rotate animation.
    • element.animate() — viewChild() finds the element, and animate() plays a scale-and-fade pulse. The returned LynxAnimation is canceled before each replay. See Animate from code and LynxAnimation.
    • The setTimeout rule — animate() is called inside setTimeout, because starting it inside a tap handler can crash the app. The class toggles are wrapped too, though signal changes don't need it. See The setTimeout rule.