CSS: возможно ли с помощью анимации увеличить элемент на месте с помощью CSS? - PullRequest
Новая
       15

CSS: возможно ли с помощью анимации увеличить элемент на месте с помощью CSS?

2 голосов
/ 10 февраля 2012

Проверьте это jsFiddle .Теперь, когда CSS-анимация почти в полном разгаре, я хотел бы сделать что-то подобное в CSS: когда мышь наводится на элемент (.box), она расширяется анимацией, ее центр остается на том же месте, и вседругие элементы остаются там, где они есть.

Если бы я знал ширину элементов, я думаю, я мог бы сделать это с помощью элемента-оболочки для каждого элемента и использовать относительное позиционирование для элемента (.box) и анимировать его ширину.Высота слева и сверху.Но в этом примере есть переменная с элементами.

Если это невозможно, какие-либо другие предложения для такого эффекта?

Ответы [ 3 ]

6 голосов
/ 11 февраля 2012

Да, вы можете использовать CSS3 переходы. 

.box {
    -webkit-transition:  -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    -ms-transition: -ms-transform .2s ease-out; 
    transition: transform .2s ease-out; 
}
.box:hover {
   -webkit-transform:scale(2);
   -moz-transform:scale(2);
   -o-transform:scale(2);
   transform:scale(2);
}

См. Fidd.e: http://jsfiddle.net/TheNix/uzgha/6/

1 голос
/ 11 февраля 2012

Да, используя преобразования и переходы.Вот обновление Fiddle: http://jsfiddle.net/rgthree/wTbTf/

.container {-webkit-transform:translateZ(0); /* Stop webkit flicker bug */}
.box {
    postion:relative;
    z-index:1;
    -webkit-transition:-webkit-transform 0.5s ease-in-out;
    -moz-transition:-moz-transform 0.5s ease-in-out;
    -o-transition:-o-transform 0.5s ease-in-out;
    transition:transform 0.5s ease-in-out;
}    
.box:hover {
    z-index:2; /* Put on top of others */
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}

Вы также можете уменьшить, как в: http://jsfiddle.net/rgthree/wTbTf/2/

0 голосов
/ 11 февраля 2012

Мой ответ не является полным ответом (поэтому я не помечаю его как принятый), а также имеет недостаток: кажется, что текст перемещается при анимации, но это мой jsfiddle без размытия, но, к сожалению, использует блоки фиксированной ширины(Я знаю, что не просил об этом :), может быть, кто-то может улучшить мой ответ).

http://jsfiddle.net/5jfDC/1/

...