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

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

Я использовал jquery .animate(), но на мой вкус он слишком изменчив... Я знаю, что могу использовать:

-webkit-transform: scale(2);

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

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

Спасибо


animation css resize
person Jenn    schedule 01.09.2010    source источник
comment
jQuery слишком изменчив? Это самый быстрый способ, который вы можете получить с помощью javascript. В каком браузере вам нужно, чтобы это работало, и в каком браузере вы тестируете?   -  person UpHelix    schedule 02.09.2010

Ответы (1)


arrow_upward
16
arrow_downward

Вы ищете свойство -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 также опубликовала довольно хорошую статью на странице . Визуальные эффекты CSS.

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

person Christopher Scott    schedule 06.09.2010