Pagina 1 din 1
Animație cu pauză între fiecare rotație
Scris: Vin Noi 27, 2020
de Marius
Am un Div pe care vreau să-l rotesc de la 0 la 90 grade, pauză 2s, apoi de la 90 la 180, iar pauză 2s .., tot asa până la 360 de grade.
Vreo idee despre cum pot adăuga o pauză de 2 secunde între fiecare rotație?
Animație cu pauză între fiecare rotație
Scris: Vin Noi 27, 2020
de MarPlo
Puteți face cu animații CSS
transform: rotate(), ca în exemplu de mai jos.
Setezi timpul de rotatie la 12 secunde si incepi cele 4 rotatii 'transform' cu 5% mai mult decat precedenta (acea diferenta va fi pauza).
Prima definire e la 0%, urmatoarea e de la 5% la 25%, apoi urmatoarea incepe de la 30%, si tot asa.
Cod: Selectaţi tot
<style>
#div_id {
width: 90px;
height: 50px;
background: #abcdef;
animation: rotate-pause 12s infinite linear;
transform: rotate();
}
@keyframes rotate-pause{
0%{
transform: rotate(0deg);
}
5%, 25%{
transform: rotate(90deg);
}
30%, 50%{
transform: rotate(180deg);
}
55%, 75%{
transform: rotate(270deg);
}
80%, 100%{
transform: rotate(360deg);
}
}
</style>
<div id='div_id'>Div content..</div>
- Demo: