CSSアニメーションの原点を変更するにはどうすればよいですか？

Question

変換では原点を変更できますが、アニメーション原点のプロパティは表示されません。アニメーションの起源をどのように変更するかは誰にも分かります。例えば 私はCSSは赤い四角が画面上に存在に成長したアニメーションを、成長持っているが、それは左上隅から成長し、私は真ん中

https://jsfiddle.net/b9cezvoz/26/

@keyframes myFrames{ 
    0%{ 
     width: 0px; 
     height: 0px; 
    } 
    100%{ 
    width: 100px; 
    height: 100px; 
    background-color: red 
    } 
} 

div{ 
    animation: myFrames .2s ease-in-out 0s 5 alternate both; 
} 

Answer 1

変換スケールのプロパティを使用することによってそれを行うことができます変換のスケールとスケールを100％にすると、変換元が鍵になります。 スケールを使用して初期幅/高さを0に設定した場合、アニメーションは機能しません（0x100は0なので）。スケーリング時にwidth/heightプロパティに初期値0を設定しないでください。 1pxに設定し、そこから100％にスケールすることができます（また、オプションで非表示に設定してから100に表示することもできますが、結果が変わる可能性があります）。

div問題のIDまたはクラス名を指定し、一般的にdivではなく、そのIDだけにCSS値を割り当てます。これはすべてのdivに影響します。

@keyframes myFrames { 
 
    0% { 
 
    width: 1px; 
 
    height: 1px; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
} 
 

 
#redsquare { 
 
    margin: 100px auto 0px auto; 
 
    animation: myFrames .2s ease-in-out 0s 5 alternate both; 
 
    transform-origin: 50% 50%; 
 
    transform: scale(100, 100); 
 
}

<div id="redsquare"> 
 
</div>

Answer 2

から、それを成長させたいと思います

あなたは番目の設定

@keyframes myFrames{ 
     0%{ 

     transform:scale(0) 
     } 
     100%{ 
     background-color: red; 
     transform:scale(1) 
     } 
    } 

div{width: 100px;height: 100px; animation: myFrames 1s ease-in-out 0s 5 alternate both; transform-origin:center center;} 

https://jsfiddle.net/b9cezvoz/27/