Современные и актуальные CSS-свойства

1. @keyframes и animation

Позволяют создавать сложные многокомпонентные анимации.

Пример:

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slide-in 1s ease-out forwards;
}

Объяснение:

• @keyframes определяет этапы анимации (от начального from до конечного to состояния).

• animation объединяет свойства:

  • slide-in — имя анимации,

  • 1s — длительность,

  • ease-out — функция плавности,

  • forwards — сохраняет конечное состояние.

2. transition

Для плавных переходов между состояниями элемента (например, при наведении).

Пример:

.button {
  background: #3498db;
  transition: background 0.3s ease, transform 0.2s;
}

.button:hover {
  background: #2980b9;
  transform: scale(1.05);
}

Объяснение:

• Изменяет background и transform плавно за указанное время.

• Можно анимировать несколько свойств через запятую.

3. transform

Изменяет геометрию элемента (без влияния на соседние элементы).

Пример:

.card {
  transform: rotate(5deg) translateY(10px);
  transition: transform 0.3s;
}

.card:hover {
  transform: rotate(0) translateY(0);
}

Свойства:

• translate(), rotate(), scale(), skew().

• 3D-трансформации: perspective, rotateX(), translateZ().

4. animation-timing-function: steps()

Дискретная анимация (например, для спрайтов).

Пример:

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -800px 0; }
}

.sprite {
  animation: sprite 1s steps(8) infinite;
}

Объяснение:

• Анимация разбивается на 8 шагов (кадров).

5. CSS-переменные (Custom Properties)

Динамическое управление анимацией через переменные.

Пример:

:root {
  --angle: 0deg;
}

.element {
  transform: rotate(var(--angle));
  transition: transform 0.5s;
}

/* Через JavaScript можно изменить --angle */

element.style.setProperty('--angle', '45deg');

6. Scroll-Driven Animations (новое!)

Анимации, привязанные к прокрутке страницы или появлению элемента.

Пример:

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: contain 0% contain 50%;
}

Объяснение:

• animation-timeline: view() — анимация запускается при попадании элемента в область просмотра.

• animation-range — определяет диапазон срабатывания.

7. will-change

Оптимизация производительности анимаций.

Пример:

.element {
  will-change: transform, opacity;
}

Объяснение:

• Предупреждает браузер о планируемых изменениях, чтобы он выделил ресурсы.

8. @property для кастомных свойств

Регистрация кастомных CSS-переменных с типами данных для анимации.

Пример:

@property --progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.element {
  animation: load 2s infinite;
}

@keyframes load {
  to { --progress: 1; }
}

9. clip-path и mask

Анимация сложных форм.

Пример:

.image {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s;
}

.image:hover {
  clip-path: circle(75% at 50% 50%);
}

Советы по оптимизации:

1. Используйте transform и opacity — они не вызывают перерисовку layout.

2. Избегайте анимации margin, width, height (провоцируют reflow).

3. Для сложных анимаций используйте requestAnimationFrame в связке с CSS.

Эти техники позволяют создавать плавные и современные анимации, совместимые с большинством браузеров (для новейших свойств проверяйте поддержку на caniuse.com).