Nadal pozostaje podstawowy problem, jak sterować czasami poszczególnych etapów wdechem, przerwą, wydechem i przerwą ponieważ ustawia sie jeden ogólny czas całej animacji a nie jej etapów
Jeśli wykorzystałeś te podejście z @keyframes, o którym wspomniałem to możesz do jednego elementu przypisać kilka animacji
Kopiuj
<form>
<label for="changeColor">Ustal czas pierwszej animacji</label>
<input type="number" name="changeColor" step="1" min="0" max="20" value="2">
<label for="moveX">Ustal czas drugiej animacji</label>
<input type="number" name="moveX" step="1" min="0" max="20" value="10">
<label for="width">Ustal szerokość elementu</label>
<input type="number" name="width" step="1" min="1" max="100" value="60">
<label for="height">Ustal wysokość elementu</label>
<input type="number" name="height" step="1" min="1" max="100" value="60">
<button>Zapisz zmiany</button>
</form>
<div class="element"></div>
Kopiuj
@keyframes changeColor {
0%, 100% {
background: red;
}
50% {
background: blue;
}
}
@keyframes moveX {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
.element {
width: 60px;
height: 60px;
animation: changeColor 4s infinite, moveX 10s infinite;
background: blue;
}
Kopiuj
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
const element = document.querySelector('.element');
form.addEventListener('submit', (e) => {
e.preventDefault();
const moveXTime = parseInt(form.elements['moveX'].value, 10);
const changeColorTime = parseInt(form.elements['changeColor'].value, 10);
const width = parseInt(form.elements['width'].value, 10);
const height = parseInt(form.elements['height'].value, 10);
if (moveXTime >= 0 && changeColorTime >= 0) {
element.style.setProperty('animation', `changeColor ${changeColorTime}s infinite, moveX ${moveXTime}s infinite`);
}
if (width >= 1) {
element.style.setProperty('width', `${width}px`);
}
if (height >= 1) {
element.style.setProperty('height', `${height}px`);
}
});
})
W moim przykładzie jest to mały kwadracik, który przesuwa się od lewej do prawej, oraz zmienia kolor z czerwonego na niebieski
