Css scale animation

Вопрос-ответ HTML/CSS
1 
element {     
  transition: all linear 0.2s;
}
element.ng-hide {
  opacity: 0;
  transform: scale(0.1);
}

Тут немного CSS, анимация show/hide для element . Там добавляется и удаляется ng-show, когда элемент видимый. Анимация начинает свою магию из центра изображения, а я хочу что бы она начиналась из угла элемента, и на оборот. Кто нибудь силен в этом? Или тут одним css не обойтись?

2

Если я правильно понял, то здесь нужно использовать свойство transform-origin.

1 лайк
3

Я использовал jQuery + AngularJS. Получилось вот так: https://jsfiddle.net/ogorobets/tqz94gf1/2/
При уменьшении, элемент двигается по направлению в левый верхний угол. А при расширении элемента, увеличивается из центра. Были использованы свойство transform-origin для задания центра для транзишена и событие transitionend для отслеживания конца анимации.

1 лайк