<p> <span><strong>1.</strong> До анимации</span> <span><strong>2.</strong> В процессе анимации</span> <span><strong>3.</strong> После анимации</span> </p> <p><strong>none</strong>: стили анимации не влияют на стиль по умолчанию.</p> <p> <span>Красный по умолчанию</span> <span>От синего к зелёному</span> <span>Обратно к красному</span> </p> <div class="none"> <div></div> </div> <p><strong>forwards</strong>: последние стили, применяемые в конце анимации, сохраняются впоследствии.</p> <p> <span>Красный по умолчанию</span> <span>От синего к зелёному</span> <span>Остаётся зелёным</span> </p> <div class="forwards"> <div></div> </div> <p><strong>backwards</strong>: стили анимации будут применяться до того, как на самом деле начинается анимация.</p> <p> <span>Уже синий</span> <span>От синего к зелёному</span> <span>Обратно к красному</span> </p> <div class="backwards"> <div></div> </div> <p><strong>Both</strong>: стили применяются до и после воспроизведения анимации.</p> <p> <span>Уже синий</span> <span>От синего к зелёному</span> <span>Остаётся зелёным</span> </p> <div class="both"> <div></div> </div>
p { color: grey; margin: 0; position: relative; } p:first-child { margin-bottom: 1rem; } p span { animation: toggle 6s infinite both; left: 0; position: absolute; } p:first-child span { animation-name: tabs; margin-right: 1rem; position: static; } p span:nth-child(1) { animation-delay: 0; position: static; } p span:nth-child(2) { animation-delay: 2s; } p span:nth-child(3) { animation-delay: 4s; } div { background: white; height: 20px; margin-bottom: 1rem; width: 220px; } div div { animation: race-none 6s linear infinite; background: crimson; height: 20px; margin-bottom: 0; position: relative; width: 20px; } div:nth-child(7) div { animation-name: race-forwards; } div:nth-child(10) div { animation-name: race-backwards; } div:nth-child(13) div { animation-name: race-both; } @keyframes tabs { 0% { opacity: 0.2; } 1% { opacity: 1; } 33% { opacity: 1; } 34% { opacity: 0.2; } 100% { opacity: 0.2; } } @keyframes toggle { 0% { opacity: 0; } 1% { opacity: 1; } 33% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } } @keyframes race-none { 0% { background: crimson; left: 0; } 33% { background: crimson; left: 0; } 34% { background: midnightblue; left: 100px; } 66% { background: mediumseagreen; left: 200px } 67% { background: crimson; left: 0; } 100% { background: crimson; left: 0; } } @keyframes race-forwards { 0% { background: crimson; left: 0; } 33% { background: crimson; left: 0; } 34% { background: midnightblue; left: 100px; } 66% { background: mediumseagreen; left: 200px } 67% { background: mediumseagreen; left: 200px; } 100% { background: mediumseagreen; left: 200px; } } @keyframes race-backwards { 0% { background: midnightblue; left: 100px; } 33% { background: midnightblue; left: 100px; } 34% { background: midnightblue; left: 100px; } 66% { background: mediumseagreen; left: 200px } 67% { background: crimson; left: 0; } 100% { background: crimson; left: 0; } } @keyframes race-both { 0% { background: midnightblue; left: 100px; } 33% { background: midnightblue; left: 100px; } 34% { background: midnightblue; left: 100px; } 66% { background: mediumseagreen; left: 200px } 67% { background: mediumseagreen; left: 200px; } 100% { background: mediumseagreen; left: 200px; } }