import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/# UI/properties/types/Анимация (animate)'/>

# Анимация (animate)

Тип `animate` используется для генерации нативных CSS-правил `@keyframes`. Каждое вложенное объектное свойство интерпретируется как отдельный кадр (frame) анимации, где ключами выступают проценты (`0%`, `50%`, `100%`) или ключевые слова (`from`, `to`).

Название анимации формируется автоматически с учетом вложенности (префиксы родителей), что гарантирует уникальность имен внутри системы `dxt-ui`.

**Входная конфигурация (`properties.json`):**
```json
{
  "button": {
    "fade": {
      "_type": "animate",
      "from": { "opacity": "0" },
      "to": { "opacity": "1" }
    },
    
    "~loading": {
      "animation-name": "button-fade",
      "animation-duration": "0.3s"
    }
  }
}
```

**Ожидаемый результат генерации (SCSS):**
```scss
@keyframes button-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.button {
  &--loading {
    animation-name: button-fade;
    animation-duration: 0.3s;
  }
}
```
