Главная » Языки программирования

Css transform all ease

Содержание
  1. transition
  2. Пример
  3. Подробно
  4. Как записывается
  5. Как понять
  6. Подсказки
  7. Особенности
  8. Сочетание Transform и Transition в CSS
  9. Transform
  10. Transition
  11. translate(15px, 15px)

transition

Свойство transition используется, когда нам нужно плавно изменить CSS-свойства между двумя состояниями элемента. Например, при наведении мышкой.

Пример

Скопировать ссылку «Пример» Скопировано

Подробно

Скопировать ссылку «Подробно» Скопировано

Свойство transition это шорткат. Как, например, margin или background . Оно включает в себя несколько подсвойств:

  • transition — property — указываем свойство, которое хотим плавно изменить;
  • transition — duration — длительность перехода;
  • transition — timing — function — функция, описывающая скорость изменения свойства;
  • transition — delay — задержка перед началом изменения.

Как записывается

Скопировать ссылку «Как записывается» Скопировано

Применить к одному свойству:

 .selector  transition: transform 4s;> .selector  transition: transform 4s; >      
 .selector  transition: transform 4s 1s;> .selector  transition: transform 4s 1s; >      
 .selector  transition: transform 4s ease-in-out 1s;> .selector  transition: transform 4s ease-in-out 1s; >

Применить к двум свойствам:

 .selector  transition: transform 4s, color 1s;> .selector  transition: transform 4s, color 1s; >

Применить ко всем свойствам, которые будут меняться:

 .selector  transition: all 0.5s ease-out;> .selector  transition: all 0.5s ease-out; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Предположим, у нас есть кнопка, у которой мы хотим изменить фон при наведении мышкой.

  button class="button">Кнопкаbutton>

Тогда можно сказать, что у кнопки есть два состояния:

  1. Базовое состояние, когда мышка не над кнопкой.
  2. Состояние при наведении курсора мыши (ховер-состояние).

Стили для двух этих состояний могут быть записаны в CSS вот так 👇

Стили для базового состояния:

 .button  background-color: blue;> .button  background-color: blue; >      
 .button:hover  background-color: white;> .button:hover  background-color: white; >

Чтобы при наведении фон кнопки изменялся не скачком, а плавно, мы используем свойство transition для плавного изменения цвета фона.

Стили для базового состояния:

 .button  background-color: blue; transition: background-color 0.6s;> .button  background-color: blue; transition: background-color 0.6s; >      
 .button:hover  background-color: white;> .button:hover  background-color: white; >

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

Стили для базового состояния:

 .button  background-color: pink; transition: background-color 0.6s, transform 0.5s;> .button  background-color: pink; transition: background-color 0.6s, transform 0.5s; >      
 .button:hover  background-color: white; transform: scale(110%);> .button:hover  background-color: white; transform: scale(110%); >

Не забывай о том, что вместе с изменяемым свойством обязательно должна указываться длительность изменения ( .5s ).

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Обратите внимание, что свойство transition мы задали в стилях для базового состояния. Таким образом, мы заранее говорим браузеру, какое свойство должно изменяться плавно.

💡 С помощью transition можно плавно изменять любое свойство, у которого значение записывается с помощью чисел (например, margin ). Исключения: visibility , z — index .

💡 По возможности старайтесь не использовать слово all для описания перехода ( transition : all . 3s ). Да, это проще на первоначальном этапе, но позже из-за этого в какой-то момент могут начать плавно изменяться свойства, которые не должны этого делать. Ну и вообще, когда браузер встречает слово all , он начинает перебирать каждое свойство элемента в поисках необходимого. Это ненужная нагрузка.

💡 Старайтесь использовать для анимации в первую очередь свойства transform и opacity — они самые производительные, потому что не приводят к перезапуску процессов Layout и Paint. Изменяйте свойства left , top , inset , margin , padding , width , inline — size , height , block — size и прочие с осторожностью, только когда без этого никак не обойтись.

Особенности

Скопировать ссылку «Особенности» Скопировано

💡 Вторым состоянием необязательно должно быть состояние при наведении. Это может быть состояние :focus , :active , :checked или, например, появление дополнительного класса.

💡 Мы можем настроить transition таким образом, что при изменении состояния переход будет выполняться с одной скоростью, а при обратном изменении состояния — с другой.

Стили для базового состояния:

 .button  background-color: pink; transition: background-color 0.3s, transform 0.2s;> .button  background-color: pink; transition: background-color 0.3s, transform 0.2s; >      
 .button:hover  background-color: white; transform: scale(110%); transition: background-color 3s, transform 2.5s;> .button:hover  background-color: white; transform: scale(110%); transition: background-color 3s, transform 2.5s; >

Обратите внимание, в этом случае свойство transition задаётся для обоих состояний.

💡 Длительность перехода может задаваться в секундах ( 0 . 3s ) или в миллисекундах ( 300ms ). Ноль перед точкой можно не писать ( .3s ).

💡 Значение свойства z — index записывается числом, но его нельзя плавно изменить никаким способом.

💡 Значение свойства visibility записывается строкой, но его в связке с opacity можно плавно изменять при помощи transition .

💡 Кроме использования для изменения внешнего вида элемента, transition прекрасно подходит для решения задач с появлением элементов. Например, при реализации тултипов или всплывающих меню:

   
Fade in
  Наведи на меня 
Эта подсказка проявилась
    
Slide up
  Наведи на меня 
Это подсказка, которая всплыла
   div> h2>Fade inh2> div class="tooltip-cnt"> span class="tooltip-target">Наведи на меняspan> div class="tooltip">Эта подсказка проявиласьdiv> div> div> div class="transitioned"> h2>Slide uph2> div class="tooltip-cnt"> span class="tooltip-target">Наведи на меняspan> div class="tooltip">Это подсказка, которая всплылаdiv> div> div>      
 .tooltip-cnt  position: relative;> .tooltip  position: absolute; /* Описываем переход */ transition: opacity 0.4s, visibility 0.4s, transform 0.4s; /* Прячем элемент */ opacity: 0; visibility: hidden;> .transitioned .tooltip  /* Второй тултип еще опускаем вниз */ transform: translateY(20px);> .tooltip-target:hover + .tooltip  opacity: 1; visibility: visible;> .transitioned .tooltip-target:hover + .tooltip  /* Поднимаем второй тултип обратно вверх при появлении */ transform: translateY(0);> .tooltip-cnt  position: relative; > .tooltip  position: absolute; /* Описываем переход */ transition: opacity 0.4s, visibility 0.4s, transform 0.4s; /* Прячем элемент */ opacity: 0; visibility: hidden; > .transitioned .tooltip  /* Второй тултип еще опускаем вниз */ transform: translateY(20px); > .tooltip-target:hover + .tooltip  opacity: 1; visibility: visible; > .transitioned .tooltip-target:hover + .tooltip  /* Поднимаем второй тултип обратно вверх при появлении */ transform: translateY(0); >

Обратите внимание, что мы прописали visibility как одно из свойств, которое нужно плавно изменить. Это работает в связке с opacity и обеспечивает возможность плавного появления и скрытия элемента:

 .tooltip  transition: opacity 0.4s, visibility 0.4s;> .tooltip  transition: opacity 0.4s, visibility 0.4s; >

Если использовать только opacity , то элемент станет невидимым, но будет доступен для взаимодействия с мышкой и клавиатурой.

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

Источник

Сочетание Transform и Transition в CSS

Сочетание Transform и Transition в CSS

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

Transform

Из названия свойства понятно, что он отвечает за трансформацию блоков. Имеет большое количество функций и еще большее количество их сочетаний. Эксперементируя, можно даже придумать 3D эффекты с Transform, но эта статья лишь о 2D. в CSS прописывается как transform: property, где property может содержать одно из нижеперечисленных значений:

translateX(10px) – сдвиг по горизонтали
translateY(10px) – сдвиг по вертикали
translate(25px, 30%) – сдвиг по диагонали
scaleX(2) – масштабирование по горизонтали. При этом 1 равен 100%
scaleY(2) – масштабирование по вертикали
scale(.5, 2) – масштабирование как по вертикали, так и по горизонтали
rotate(10deg) – поворот в заданную сторону (значение в градусах). При этом отрицательные значения отвечают за поворот влево, а положительные – вправо
skewX(20deg) – наклон по горизонтали. Значение так же в градусах
skewY(20deg) – наклон по вертикали
skew(5deg, -20deg) – наклон по вертикали и горизонтали
matrix(w, sky, skx, h, mx, my) – задает все вышеописанные свойства в одном, кроме rotate() и skew(). Значения matrix():
w – ширина объекта. 1 равен 100%
h – высота объекта. 1 равен 100%
sky – наклон по вертикали. 0 – без наклона
skx – наклон по горизонтали. 0 – без наклона
mx – сдвиг по горизонтали. 0 – без сдвига
my – сдвиг по вертикали. 0 – без сдвига

Transition

Отвечает за плавность анимации блока. Имеет несколько свойств, которые можно задать одним. Взаимодействует не только с transform (например, с помощью transition можно сделать плавное изменение цвета или размера блока). Не поддерживается устаревшими браузерами (решается с помощью специфических -moz-transition, -webkit-transition и т.д.).

transition-property – задает свойство элемента, которое будет анимироваться
transition-duration – Задает время анимации в секундах. 1 равен одной секунде.
transition-timing-function – Тип анимации, где могут быть указаны:
– ease – медленная анимация с замедлением в середине
– linear – медленная анимация с ускорением к концу
– ease-in – анимация плавно начинается
– ease-out – анимация плавно заканчивается
– ease-in-out – анимация плавно начинается и плавно заканчивается
transition-delay – задержка перед началом анимации
cubic-bezier – анимация по Кривой Безье
transition(property, duration, timing-function) – задает все вышеперечисленные свойства, исключая cubic-beizer

Стоит отметить, что CSS3-аналог transition — animate, который работает с ключевыми кадрами (@keyframes)

Взаимодействие и примеры

transition в сочетании с transform дают нам плавную и гибкую анимацию без javascript.

Пример использования rotate()

translate(15px, 15px)

.container <
position: relative;
display: inline-block;
height: 180px;
margin: 0 1em 1em;
>
.transformed:before <
content: attr(data-content);
display: block;
margin: 0;
padding: 7px 0;
text-align: center;
font-weight: normal;
background: rgba(255,255,255,.7);
>
.transformed <
position: absolute;
bottom: 0;
background: yellowgreen;
opacity: 0.7;
>
.t-rotate <
transform: rotate(-20deg);
transition(transform, 1s, ease-in-out);
>

Спасибо за прочтение.
P.S. что-то совсем уж длинно получилось, извиняюсь.

Источник

Читайте также:  Opera mini and java
Оцените статью
© 2024 Программирование