Wie kann man in CSS Transition sowohl die Scroll-Funktion als auch die Scale- und Filter-Funktion verwenden?

Um in CSS eine Transition zu erstellen, die sowohl die Scroll-Funktion als auch die `scale`- und `filter`-Eigenschaften verwendet, kannst du die `transition`-Eigenschaft in Kombination mit JavaScript nutzen, um das Scrollen zu steuern. Hier ist ein einfaches Beispiel, wie du dies umsetzen kannst:

1. **HTML-Struktur**:
```html
<div class="container">
<div class="box"></div>
</div>
```

2. **CSS-Stile**:
```css
.container {
height: 200vh; /* Damit man scrollen kann */
position: relative;
}

.box {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.5s, filter 0.5s;
}

.box.scrolled {
transform: translate(-50%, -50%) scale(1.5);
filter: blur(5px);
}
```

3. **JavaScript für das Scrollen**:
```javascript
window.addEventListener('scroll', () => {
const box = document.querySelector('.box');
const scrollPosition = window.scrollY;

if (scrollPosition > 100) { // Beispielwert für Scroll-Trigger
box.classList.add('scrolled');
} else {
box.classList.remove('scrolled');
}
});
```

In diesem Beispiel wird die `.box` beim Scrollen vergrößert und unscharf, wenn die Scroll-Position einen bestimmten Wert überschreitet. Die `transition`-Eigenschaft sorgt dafür, dass die Änderungen sanft ablaufen.