Wie skaliert/Größe einer CSS-Animation?

Question

Nicht wirklich bewusst, wie CSS Animationen zu verwenden, aber ich fand etwas, das perfekt für meine Website funktioniert. Das eine Problem ist, dass es viel zu klein ist. Hat jemand einen Rat für was ich basteln müsste, um die Größe zu erweitern? Ich sehe tatsächlich, wo die Größe/Skala gegen Ende der Animation vergrößert werden soll, was mit den Skalenattributen offensichtlich wird. Was ich nicht weiß, ist, die Größe zu steuern, bevor die Animation dazu führt, dass sie sich ausdehnt. Vielen Dank. -Wilson

Ex: http://www.wilsonschlamme.com/animationtest.html

css:

.overlay-loader .loader-icon { 
    position: absolute; 
    top: 50%; 
    left: 44%; 
    color: #42f498; 
} 

.overlay-loader .loader-icon.spinning-cog { 
    -webkit-animation: spinning-cog 1.3s infinite ease; 
    -moz-animation: spinning-cog 1.3s infinite ease; 
    -ms-animation: spinning-cog 1.3s infinite ease; 
    -o-animation: spinning-cog 1.3s infinite ease; 
    animation: spinning-cog 1.3s infinite ease; 
    background-color: #42f498; 
} 

@-webkit-keyframes spinning-cog { 
    0% { -webkit-transform: rotate(0deg) } 
    20% { -webkit-transform: rotate(-45deg) } 
    100% { -webkit-transform: rotate(360deg) } 
} 

@-moz-keyframes spinning-cog { 
    0% { -moz-transform: rotate(0deg) } 
    20% { -moz-transform: rotate(-45deg) } 
    100% { -moz-transform: rotate(360deg) } 
} 

@-o-keyframes spinning-cog { 
    0% { -o-transform: rotate(0deg) } 
    20% { -o-transform: rotate(-45deg) } 
    100% { -o-transform: rotate(360deg) } 
} 

@keyframes spinning-cog { 
    0% { transform: rotate(0deg) } 
    20% { transform: rotate(-45deg) } 
    100% { transform: rotate(360deg) } 
} 

@-webkit-keyframes shrinking-cog { 
    0% { -webkit-transform: scale(2) } 
    20% { -webkit-transform: scale(2.2) } 
    100% { -webkit-transform: scale(1) } 
} 

@-moz-keyframes shrinking-cog { 
    0% { -moz-transform: scale(2) } 
    20% { -moz-transform: scale(2.2) } 
    100% { -moz-transform: scale(1) } 
} 

@-o-keyframes shrinking-cog { 
    0% { -o-transform: scale(2) } 
    20% { -o-transform: scale(2.2) } 
    100% { -o-transform: scale(1) } 
} 

@keyframes shrinking-cog { 
    0% { transform: scale(2) } 
    20% { transform: scale(2.2) } 
    100% { transform: scale(0) } 
} 

.overlay-loader .loader-icon.shrinking-cog { 
    -webkit-animation: shrinking-cog .3s 1 ease forwards; 
    -moz-animation: shrinking-cog .3s 1 ease forwards; 
    -ms-animation: shrinking-cog .3s 1 ease forwards; 
    -o-animation: shrinking-cog .3s 1 ease forwards; 
    animation: shrinking-cog .3s 1 ease forwards; 
    background-color: #42f498; 
} 

Answer 1

Wenn Sie es groß von Anfang der Animation sein wollen, fügen Sie Skala Spinnen-cog-Animation. tue dies zu allen Präfixen (ändere x zu welcher Skala du willst)

@keyframes spinning-cog { 
    0% { transform: rotate(0deg) scale(x)} 
    20% { transform: rotate(-45deg) scale(x)} 
    100% { transform: rotate(360deg) scale(x)} 
}