<p><strong>scale(1)</strong>: обычный размер</p> <p><strong>scale(2)</strong>: двойной размер</p> <p><strong>scale(0.5)</strong>: половина размера</p> <p><strong>scale(0)</strong>: нулевой размер (невидим)</p> <p><strong>scale(-1)</strong>: отражение</p> <div>Масштаб</div>
p { animation: scaling-toggle 10s steps(1) 0s infinite forwards; background: white; color: grey; left: 2rem; margin: 0; opacity: 0; padding: 0 0.5em; position: absolute; top: 2rem; z-index: 1; } p:first-child { left: 0; position: relative; top: 0; } p:nth-child(2) { animation-delay: 2s; } p:nth-child(3) { animation-delay: 4s; } p:nth-child(4) { animation-delay: 6s; } p:nth-child(5) { animation-delay: 8s; } p strong { content: ""; display: inline-block; } div { animation: scaling 10s linear 0s infinite; background: goldenrod; border-radius: 60px; color: white; height: 120px; line-height: 120px; margin-top: 2rem; ; text-align: center; transition: all 100ms linear; width: 120px; } @keyframes scaling { 0% { transform: scale(1); } 19% { transform: scale(1); } 20% { transform: scale(2); } 39% { transform: scale(2); } 40% { transform: scale(0.5); } 59% { transform: scale(0.5); } 60% { transform: scale(0); } 79% { transform: scale(0); } 80% { transform: scale(-1); } 99% { transform: scale(-1); } 100% { transform: scale(1); } } @keyframes scaling-toggle { 0% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }