css3 анимация / переход / трансформация: как заставить изображение расти? - PullRequest
Новая
       2

css3 анимация / переход / трансформация: как заставить изображение расти?

7 голосов
/ 01 сентября 2010

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

-webkit-transform: scale(2);

Но я хочу, чтобы он был установлен на определенный размер ... не просто удвоить или утроить размер изображения

Любая помощь?

Спасибо

1 Ответ

16 голосов
/ 06 сентября 2010

Вы ищете свойство -webkit-transition для webkit. Это позволяет вам указать два отдельных правила CSS (например, два класса), а затем тип перехода, который будет применяться при переключении этих правил.

В этом случае вы можете просто определить начальную и конечную высоты (я сделал и высоту, и ширину в приведенном ниже примере), а также определить -webkit-transition-property для свойств, которые вы хотите перенести и -webkit-transition-duration на время: 

div {
    height: 200px;
    width: 200px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 1s;
    transition-property: height, width;
    transition-duration: 1s;
    background: red;
}

div:hover {
    width: 500px;
    height: 500px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 1s;
    transition-property: height, width;
    transition-duration: 1s;
    background: red;
}

Проверено в Safari. Команда Safari также опубликовала довольно хорошую рецензию на Визуальные эффекты CSS .

Однако я бы также порекомендовал еще раз взглянуть на jQuery, так как новый CSS3 не будет полностью совместим с версиями IE.

...