CSSの右から左にスケールする方法は？

Question

div要素の位取りをアニメーション化しようとしています。しかし、アニメーションは中心から始まり、広がります。右から始まり左に広がるアニメーションがありますか？

.graybox { 
    float: right; 
    background-color: gray; 
    height: 100px; 
    width: 400px; 
    line-height: 100px; 
    -webkit-animation: main 250ms; 
    -moz-animation: main 250ms; 
    -ms-animation: main 250ms; 
    animation: main 250ms; 
} 

@-moz-keyframes main { 
    0% { 
    -moz-transform: scaleX(0); 
    } 
    100% { 
    -moz-transform: scaleX(1); 
    } 
} 

Answer 1

デフォルトでtransform-originが50% 50%で、あなたは100% 50%にそれをリセットすることができ、最初の値100%はxオフセットです、第2のv alue 50%はyオフセットです。

幅と高さの両方に合わせてdivをスケールするには、scaleXをscaleに変更するだけです。

また、正しい@keyframesの構文を設定する必要があります。-mozという接頭辞は、FirefoxなどのMozillaブラウザでのみ機能します。一般的なプレフィックスの追加にはautoprefixerを使用することをお勧めします。

.graybox { 
 
    float: right; 
 
    background-color: gray; 
 
    width: 100%; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    animation: main 3s; 
 
    transform-origin: 100% 50%; 
 
} 
 

 
@keyframes main { 
 
    0% { 
 
    transform: scale(0); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
}

<div class="graybox"></div>

Answer 2

使用transform-origin

.graybox { 
 
    float: right; 
 
    background-color: gray; 
 
    height: 100px; 
 
    width: 400px; 
 
    line-height: 100px; 
 
    transform-origin: 100% 50%; 
 
    animation: main .5s; 
 
} 
 

 
@keyframes main { 
 
    0% { 
 
    transform: scaleX(0); 
 
    } 
 
    100% { 
 
    transform: scaleX(1); 
 
    } 
 
}

<div class="graybox"></div>