Как масштабировать справа налево в 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% является й-смещением, и второй v alue 50% - y-offset.

Чтобы сделать шкалу div как по ширине, так и по высоте, просто измените scaleX на scale.

Вы также должны установить правильный синтаксис @keyframes, префикс -moz будет работать только в браузерах Mozilla, таких как Firefox. Я предлагаю использовать 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>