CSS 애니메이션의 크기를 조절하거나 크기를 조정하는 방법은 무엇입니까?

Question

CSS 애니메이션을 사용하는 방법을 잘 모르지만 내 사이트에서 완벽하게 작동하는 것을 발견했습니다. 한 가지 문제는 너무 작습니까? 크기를 늘리기 위해 내가 뭘 고칠 필요가있는 사람이라면 누구나 조언을 구할 수 있습니까? 실제로 애니메이션의 끝 부분에 크기/비율을 늘려야하는 부분을 보았습니다.이 크기는 배율 속성으로 명확하게 나타납니다. 내가 모르는 것은 애니메이션이 확장되기 전에 크기를 제어하는 ​​것입니다. 고맙습니다.

예 -Wilson : 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

. 이것을 모든 접두사에 적용하십시오 (x를 원하는 크기로 변경하십시오).

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