For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/api/css/properties/animation-name.md.
Lynx
  • English

      • animation-name

      Introduction

      animation-name property specifies a list of animations to apply to an element. Each name refers to an animation sequence defined by @keyframes.

      Examples

      css-apisrc/animation-name/App.tsx
      Code
      Preview

      Syntax

      /* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/* Multiple animations */
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;
      Info

      Animation names are case-sensitive. The identifier must follow these naming rules, otherwise it may be treated as invalid.

      Formal definition

      Initial valuenone
      Applies toall elements
      Inheritedno
      Animatableno

      Formal syntax

      animation-name: <string>;

      See also

      Compatibility

      LCD tables only load in the browser

      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.