Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: JennОтветов: 1

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

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

-webkit-transform: scale(2);

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

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

Спасибо

  • jQuery слишком изменчив? Это самый быстрый способ, который вы можете получить с помощью javascript. В каком браузере вам нужно, чтобы это работало, и в каком браузере вы тестируете? UpHelix 02.09.2010

animationcssresize

Ответы

Ответ 1 · рейтинг 16 · Christopher Scott

Вы ищете свойство -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.

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы