Keyframe Animation
CSS @keyframes Animation
A set of style rules defining intermediate steps in a CSS animation sequence using percentage waypoints.
Техническая деталь
CSS Keyframe Animations animate property changes over a specified duration using easing functions (ease, linear, cubic-bezier). Only animatable properties can transition — layout properties like display and grid-template cannot. Performance-critical transitions should target transform and opacity, which run on the compositor thread without triggering layout recalculation. The will-change property hints the browser to optimize for upcoming transitions by promoting elements to their own compositing layer.
Пример
```css
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: translateY(0); }
}
.card {
animation: fade-in-up 0.4s ease-out both;
}
```
Связанные форматы
Связанные инструменты
М
Минификатор CSS
Ф
Форматирование CSS
Г
Генератор CSS-градиентов
Г
Генератор CSS Box Shadow
Г
Генератор CSS Flexbox
Г
Генератор CSS Grid
Г
Генератор CSS-анимаций
Г
Генератор CSS Border Radius
Г
Генератор CSS Text Shadow
Г
Генератор CSS Transform
C
CSS Unit Converter
C
CSS Color Converter
M
Media Query Generator
C
CSS Filter Effects
C
CSS Clip-Path Generator