Vlastné CSS funkcie, definované pomocou pravidla @function, umožňujú vytvárať funkcie v CSS, ktoré prijímajú parametre a vracajú dynamické hodnoty na základe výpočtov alebo podmienok.
Funkcia je dostupná od verzie Chrome 139. Custom CSS funkcie sú rozšírením CSS, ktoré umožňuje definovať vlastné funkcie podobné vlastným vlastnostiam (custom properties), ale s možnosťou spracovania parametrov a výpočtov. Na rozdiel od statických hodnôt vracajú dynamické výsledky pomocou kľúčového slova result.
Nižšie je uvedený príklad použitia vlastnej CSS funkcie na vytvorenie staggered animácie, ktorá sa spustí po kliknutí na tlačidlo „Launch Animation“.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Custom Function: Button-Triggered Staggered Animation</title>
<style>
/* Define the custom function */
@function --stagger-delay(--index <integer>, --base <time>: 0.1s) {
result: calc(var(--index) * var(--base));
}
/* Keyframes for the fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Root variables */
:root {
--stagger-base: 0.15s;
/* Adjustable base delay */
}
/* Container styles */
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
button {
padding: 0.75rem 1.5rem;
font-size: 1rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 1rem;
}
button:hover {
background-color: #0056b3;
}
.list {
list-style: none;
padding: 0;
width: 300px;
}
.item {
background-color: white;
padding: 1rem;
margin: 0.5rem 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
/* Start hidden */
transform: translateY(20px);
/* Initial shift */
transition: opacity 0.1s, transform 0.1s;
/* Optional smooth reset */
}
/* Apply animation only when .animate class is added */
.item.animate {
animation: fadeIn 0.5s ease-out forwards;
}
/* Staggered delays using the custom function */
.item:nth-child(1).animate {
animation-delay: --stagger-delay(0);
/* 0s */
}
.item:nth-child(2).animate {
animation-delay: --stagger-delay(1, var(--stagger-base));
/* 0.15s */
}
.item:nth-child(3).animate {
animation-delay: --stagger-delay(2);
/* 0.3s (uses default base) */
}
.item:nth-child(4).animate {
animation-delay: --stagger-delay(3, 0.2s);
/* 0.6s (overrides base) */
}
.item:nth-child(5).animate {
animation-delay: --stagger-delay(4);
/* 0.6s */
}
</style>
</head>
<body>
<div>
<button id="launch">Launch Animation</button>
<button id="reset">Reset</button>
</div>
<div class="list">
<div class="item">Item 1: Instant fade-in</div>
<div class="item">Item 2: Delayed by 0.15s</div>
<div class="item">Item 3: Delayed by 0.3s</div>
<div class="item">Item 4: Delayed by 0.6s (custom base)</div>
<div class="item">Item 5: Delayed by 0.6s</div>
</div>
<script>
document.getElementById('launch').addEventListener('click', () => {
document.querySelectorAll('.item').forEach(item => {
if (!item.classList.contains('animate')) {
item.classList.add('animate');
}
});
});
document.getElementById('reset').addEventListener('click', () => {
document.querySelectorAll('.item').forEach(item => {
if (item.classList.contains('animate')) {
// Reset animation
item.classList.remove('animate');
}
});
});
</script>
</body>
</html>
Funkcia --stagger-delay prijíma dva parametre: index (povinný) a base (voliteľný, s predvolenou hodnotou 0,1 s). Táto funkcia vypočíta oneskorenie animácie pre každý prvok na základe jeho indexu.
