Почему не работает transition css
Перейти к содержимому

Почему не работает transition css

  • автор:

transition не работает

Есть такой код. Смотрится тут он криво, но суть в том, что при нажатии input блок section становится видимым, но, я хочу, чтобы появлялся блок с эффектом (Медленное появление, или появление сверху вниз, все равно). Но у меня не получается. В чем может быть проблема? Первый раз использую эту функцию если что

section < transition-property: all; transition-timing-function: ease; transition-duration: 2s; display: none; >input < display: none; >label < display: block; width: 50px; height: 50px; padding: 2px; margin: 2px; background-color: #1a1a1a; >label img < position: relative; width: 50px; height: 50px; filter: grayscale(0.9); >label img:hover < filter: grayscale(0); >label:hover < color: #888; cursor: pointer; >input:checked + label img < filter: grayscale(0); >#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4
 

Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.

Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.

yjeytjetyj rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.

Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare riyjtyjtyejy Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.

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; >      

Стили для hover-состояния:

 .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 , то скрытие и появление не будет плавным.

transition

Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов , таких как :hover или :active или установлены динамически с помощью JavaScript.

  • transition-delay (en-US): 0s
  • transition-duration : 0s
  • transition-property (en-US): всё
  • transition-timing-function (en-US): ease
  • transition-behavior (en-US): normal
  • transition-delay (en-US): как указано
  • transition-duration : как указано
  • transition-property (en-US): как указано
  • transition-timing-function (en-US): как указано
  • transition-behavior (en-US): как указано

Синтаксис

/* Применить к 1 свойству */ /* имя свойства | длительность */ transition: margin-left 4s; /* имя свойства | длительность | задержка */ transition: margin-left 4s 1s; /* имя свойства | длительность | временная функция | задержка */ transition: margin-left 4s ease-in-out 1s; /* Применить к 2 свойствам */ transition: margin-left 4s, color 1s; /* Применить ко всем изменённым свойствам */ transition: all 0.5s ease-out; /* Глобальные значения */ transition: inherit; transition: initial; transition: unset; 

Свойство transition указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.

Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям all и none ). Это включает в себя:

  • ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:
    • ключевое слово none
    • ключевое слово all
    • именование свойства CSS.

    Посмотрите, что предпринимается когда у списков значений свойств разные длины. Вкратце, избыточные свойства, не подлежащие анимации, игнорируются.

    Формальное описание синтаксиса

    transition =
    # (en-US)

    =
    [ (en-US) none | (en-US) ] (en-US) || (en-US)
    || (en-US)
    || (en-US)

    =
    all | (en-US)

    =
    linear | (en-US)
    | (en-US)
    | (en-US)

    =
    linear( )

    =
    ease | (en-US)
    ease-in | (en-US)
    ease-out | (en-US)
    ease-in-out | (en-US)
    cubic-bezier( , , , )

    =
    step-start | (en-US)
    step-end | (en-US)
    steps( , ? (en-US) )

    =
    [ (en-US) ] (en-US) # (en-US)

    =
    jump-start | (en-US)
    jump-end | (en-US)
    jump-none | (en-US)
    jump-both | (en-US)
    start | (en-US)
    end

    =
    && (en-US)
    ? (en-US)

    =
    (en-US)

    Примеры

    Примеры CSS переходов включены в главную статью о CSS переходах.

    Спецификации

    Specification
    CSS Transitions
    # transition-shorthand-property

    Совместимость с браузерами

    BCD tables only load in the browser

    Почему не работает transition свойство?

    Скажите так вообще возможно использовать transition??

    • Вопрос задан более трёх лет назад
    • 39816 просмотров

    Комментировать
    Решения вопроса 0
    Ответы на вопрос 5

    Petroveg

    Миром правят маленькие с#@&ки

    Переключение display не даст возможность применять transition. Используйте, например, opacity.

    Если хотите плавное изменение свойств при наведении (или другом состоянии) — не цепляйте transition к этому состоянию (например, к :hover в вашем случае), потому что как только состояние пропадёт (увели курсор с элемента), то произойдёт резкая смена значений.

    Однако, если вам нужно плавное появление и резкое исчезновение, то вешать нужно как раз на :hover (или другое выбранное для появления состояние).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *