Starting Style
CSS @starting-style Rule
A rule defining initial styles for elements transitioning from display:none, enabling entry animations.
รายละเอียดทางเทคนิค
CSS Starting Styles 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
.button {
background: #3b82f6;
transform: scale(1);
transition: background 200ms ease, transform 150ms ease;
}
.button:hover {
background: #2563eb;
transform: scale(1.05);
}
```
เครื่องมือที่เกี่ยวข้อง
C
CSS Minifier
C
CSS Beautifier
C
CSS Gradient Generator
C
CSS Box Shadow Generator
C
CSS Flexbox Generator
C
CSS Grid Generator
C
CSS Animation Generator
C
CSS Border Radius Generator
C
CSS Text Shadow Generator
C
CSS Transform Generator
C
CSS Unit Converter
C
CSS Color Converter
M
Media Query Generator
C
CSS Filter Effects
C
CSS Clip-Path Generator