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

あなたはそれがアニメーションの開始から大になりたい場合は、スピニングCOGアニメーションにスケールを追加します。これをすべてのプレフィックスに適用してください（xを任意のスケールに変更してください）

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