Css плавное увеличение размера

How To Do CSS Transitions With Height: Auto

Creating a smooth expand/collapse animation seems easy. Surely you can set a transition on height: auto , and it’ll just work?

Sadly, the CSS gods aren’t so kind.

Instead of the smooth open and close you wanted, your element flashes to its new height. No smooth animation.

As it turns out, animating on CSS auto values doesn’t work, and it’s honestly a real shame. We need to use specific values, and that’s not a luxury we always have.

Fortunately, there are several approaches we can take to animating auto dimensions in CSS.

Method 1: Use transform

Despite its rampant use, you should avoid CSS transitions on the height or width properties (among some others).

These properties affect the page layout. To see how other elements on the page are being affected during your animation, the browser completely recalculates your page’s layout.

This is where the CSS transform property comes in. transform causes your element to be animated like an image, and skip the layout recalculations. If you can use this approach, you should.

Unfortunately, there are two deal-breakers in using transform to collapse your content:

Method 2: Animate max-height / max-width

A different approach to collapsing height is to collapse max-height in its place.

The upside of this approach is that it’s straightforward. It also manages to avoid the weird warping effect of transform: scale .

There are some downsides, though:

• We’re animating on height , with all its layout-thrashing goodness
• You need a non-auto value for max-height
• Your transition-timing applies to the max-height range, not height . This makes it nearly impossible to get a specific visual effect from your transitions.

Method 3: Calculate height with JavaScript

A lengthier (but more precise) approach is to use JavaScript to calculate the animation start and end using the element’s rendered height .

Once we determine the element’s actual height, we can inject it as inline CSS so the browser has something to transition between.

In terms of effect, this is probably the one you were going for, but with tradeoffs.

• We’re still animating on height
• We’ve introduced a fair chunk of code to address a very narrow problem
• There’s tight coupling between your JavaScript and CSS

Method 4: Nuke from orbit with FLIP + Inverse Scaling

Remember Method 1 and all the problems that using transform caused?

Well, it turns out you can fix them.

Content warping can be fixed by applying counter-scaling on your content. The FLIP technique also lets us move surrounding content in a performant way.

This looks much better than our initial transform attempt, and solves the problems we were having. However:

• This solution is big and complex. We’ve introduced a lot of code now, and it’s still a very narrow problem.
• Several moving parts need to stay synchronised
• We need a custom easing function. I’ve used linear for simplicity, but anything else gets gnarly.
• Even more coupling than the height example.

Источник

Плавные трансформации на чистом CSS. Свойство transition

CSS-свойство transition служит для создания плавных переходов между двумя состояниями элемента. Оно помогает избежать резких и нежелательных изменений, делая анимацию более естественной и приятной для глаз.

Свойство в общем виде записывается так:

transition: property duration timing-function delay; 

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all , переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear , ease , ease-in , ease-out , ease-in-out .
• delay — время задержки перед началом перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).

Примеры использования

В данном примере применяем плавный переход цвета фона ( background-color ) для элемента p при наведении курсора. Фон плавно изменится за секунду.

👉 Если вы не понимаете, что написано в этом примере кода и откуда там p , прочитайте статью про селекторы.

В этом примере применяем переход для двух свойств ( width и height ) одновременно. При наведении курсора размеры элемента p плавно увеличиваются.

Анимировать изменение цвета текста при наведении на ссылку.

Изменение размера шрифта при наведении на текст:

Нюансы

☹️ Не все свойства возможно анимировать. Для корректной работы перехода изменяемое свойство должно быть анимируемым. Например:

• Цветовые свойства: color , background-color , border-color и другие.
• Размеры и отступы: width , height , padding , margin , top , right , bottom , left и другие.
• Свойства трансформации: transform (включая rotate , scale , translate , skew и другие).
• Некоторые свойства текста: font-size , letter-spacing , word-spacing , line-height .
• Свойство прозрачности: opacity .
• Свойства границы: border-width , border-radius .
• Свойство позиционирования: position .

❌ Не все CSS-свойства могут быть анимированы. Например, свойства display , content , visibility и некоторые другие не поддерживают анимацию.

Переходы не работают при изменении свойств с помощью JavaScript. В этом случае лучше использовать CSS-анимации или JavaScript-анимации.

Если вам нужна более сложная анимация или нужно анимировать изменение свойств, которые не поддерживают переходы, вы можете использовать CSS-анимации с помощью свойств @keyframes и animation .

Поддержка браузерами

Свойство transition хорошо поддерживается всеми современными браузерами. Для детальной информации рекомендуется обратиться к сайту caniuse.

Материалы по теме

• Тренажёры по CSS-анимациям от HTML Academy.
• : hover, : focus, : active — как работают состояния элементов.
• Функции плавности — подборка функций плавности от Андрея Ситника и Ивана Соловьева.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS

Прочитав эту статью, вы узнаете, как сделать так, чтобы при наведении мышки, изображение плавно увеличивалось. И не просто увеличивалось в размерах, а чтобы создавался эффект зума.

Мы будем использовать только html и css. JavaScript нам не понадобится.

Итак, напишем немного html кода. Мы поместим нашу картинку img в блок с классом photo

Здесь я не добавляю какие-либо дополнительные классы к картинке, чтобы не запутывать вас при объяснении. Но на своем проекте, лучше будет, если вы тегу img добавите какой-то свой класс и будете обращаться к картинке по этому классу.

Далее перейдем к css. С помощью hover мы сможем менять значения у свойств.

В данном случае, мы увеличим картинку, изменив для нее свойство transform. Запишем это в коде:

Здесь мы прописали следующую инструкцию: при наведении (hover) на блок, в котором содержится картинка (класс photo), мы меняем значение transform у самой картинки (img).

Значение scale — это на сколько мы масштабируем картинку. По умолчанию идет значение 1.

Чтобы добавить немного плавности переходу, добавим свойство transition для тега img

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

Теперь картинка у нас увеличивается плавно, но она выходит за пределы свой условной рамки. Чтобы это исправить, нам нужно добавить к блоку photo свойство overflow со значением hidden

Мы, как бы, говорим: все что выходит за пределы этого блока — скрываем.

Но это еще не все, ведь браузер не знает, какой размер у нашего блока — поэтому нам нужно его задать. А для картинки прописать, чтобы она занимала всю ширину и высоту блока photo.

В итоге получится вот такой код:

Надеюсь вы поняли принцип, по которому можно делать увеличение картинки при ховере. Я прикреплю наше видео, где еще раз подробно все объясняю.

Источник

Плавное увеличение изображения при наведении CSS

Довольно частая практика на современных сайтах — плавное увеличение блока с изображением. Как же это сделать с помощью CSS?

Плавное увеличение изображения при наведении курсора CSS

Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:

Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.

.box overflow:hidden; 
width: 250px; 
height:250px; 
>

Всё как и оговаривали — квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:

.box img -moz-transition: all 1s ease-out; 
-o-transition: all 1s ease-out; 
-webkit-transition: all 1s ease-out; 
transition: all 1s ease-out; 
> 
 
.box img:hover -webkit-transform: scale(1.2); 
-moz-transform: scale(1.2); 
-o-transform: scale(1.2); 
transform: scale(1.2); 
>

Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!

Источник