Transition css не работает: Почему не работает transition свойство? — Хабр Q&A

переход не работает с непрозрачностью [html, transition, css, opacity]

Итак, у меня есть заголовок с двумя кнопками, логином и присоединением, и у меня он есть, чтобы, когда пользователь наводит курсор на одну из кнопок, отбрасывает контейнер с несколькими входами и кнопкой. Я хочу, чтобы раскрывающийся список исчезал с помощью css opacity, но я не могу заставить его работать. Может быть, есть другой способ лучше. Спасибо, а вот и скрипка.

HTML:

<div>
    <div>
        <span>Login</span>
        <div>
            <div>
                <form action="/login" method="POST">
                    <input placeholder="Email" type="text" name="login_email"/>
                    <input placeholder="Password" type="password" name="login_password"/>
                    <input type="submit" value="Login"/>
                </form>
            </div>
        </div>
    </div><!--
    --><div>
        <span>Join</span>
        <div>
            <div>
                <form action="/join" method="POST">
                    <input placeholder="Your Name" type="text" name="name"/>
                    <input placeholder="Email" type="text" name="email"/>
                    <input placeholder="Password" type="password" name="password"/>
                    <input type="submit" value="Join"/>
                </form>
            </div>
        </div>
    </div>
</div>

CSS:

#membership_container {
    float: right;
    position: relative;
    vertical-align: top;
    display: inline-block;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #444444;
    text-align: center;
}
#login_button {
    position: relative;
    vertical-align: top;
    display: inline-block;
    float: left;
    height: 100%;
    margin: 0px;
    padding: 0px 10px;
    background-color: #444444;
    border-left: 2px solid #7B7B7B;
    border-right: 2px solid #7B7B7B;
    cursor: pointer;
    cursor: hand;
}
#login_button:hover {
background-color: #696969;
}
#login_button #login_box {
display: none;
opacity: 0.
  0;
}
#login_button:hover #login_box {
display: block;
opacity: 1;
}
#login_text {
    position: relative;
    margin: 9px 0px 0px;
    text-align: center;
    color: white;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
#join_button {
    position: relative;
    vertical-align: top;
    display: inline-block;
    float: left;
    height: 100%;
    margin: 0px;
    background-color: #444444;
    padding: 0px 10px;
    border-right: 2px solid #7B7B7B;
    cursor: pointer;
    cursor: hand;
}
#join_button:hover {
background-color: #696969;
}
#join_button:hover #join_box {
display: block;
opacity: 1.0;
}
#join_text {
    position: relative;
    margin: 9px 0px 0px;
    text-align: center;
    color: white;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
.button_blur {
    background-color: #444444;
}
.button_blur:hover {
    background-color: #696969;
}
.button_focus {
    background-color: #696969;
}
.  form_containers {
    z-index: 10;
    position: absolute;
    display: none;
    opacity: 0.0;
    border: 5px solid #888888;
    border-radius: 10px 0px 10px 10px;
    background-color: #F1F1F1;
    -o-transition: opacity .8s linear;
    -ms-transition: opacity .8s linear;
    -moz-transition: opacity .8s linear;
    -webkit-transition: opacity .8s linear;
    transition: opacity .8s linear;
}
#login_box {
    top: 35px;
    right: -2px;
    /*left: -115px;*/
}
#join_box {
    top: 35px;
    right: -2px;
    /*left: -73px;*/
}
.form_inner_containers {
    position: relative;
    margin: auto auto;
    display: block;
    background-color: #F1F1F1;
    border-radius: 10px;
    border: 0px;
}
.form_hidden {
    display: none;
}
.form_shown {
    display: block;
}
.inputs {
    border-radius: 8px;
    background-color: white !important;
    outline: none;
    border: 0px;
    font-size: 22px;
    padding: 10px;
    margin: 10px;
    box-shadow: 0px 0px 0px grey;
}
.inputs:focus {
    box-shadow: 3px 3px 3px grey;
}
.
  buttons {
    position: relative: 
    display: block;
    background-color: #00ADEF;
    margin: 10px;
    border-radius: 8px;
    padding: 10px 15px 8px;
    width: 269px;
    outline: none;
    font-size: 22px;
    border: 0px;
    cursor: pointer;
    cursor: hand;
    color: #F1F1F1;
}
.buttons:hover {
    background-color: #18B4EF;
}
.buttons:active {
    background-color: #91D6F0;
    color: #F1F1F1;
    outline: none;
}

html transition css opacity

person BestAnswer    schedule 06.06.2014    source источник

---

Ответы (4)

arrow_upward
2
arrow_downward

Содержимое установлено на «display: none;» чтобы скрыть их. При наведении для них устанавливается значение «display: block», которое немедленно отображает их и игнорирует переход непрозрачности. Лично меня эта «ошибка» очень раздражает (это не ошибка … но раздражает).

Двумя обходными путями являются Javascript (беспорядочный) и использование анимации ключевых кадров CSS. http://hschwarz77.wordpress.com/2013/10/16/css-transition-from-display-none-to-display-block-on-hover/

Насколько мне известно, это единственные решения, в которых div полностью скрыт (и непригоден для использования … видимость: скрытый занимает пространство) и исчезает.

person Jason    schedule 06.06.2014

arrow_upward
1
arrow_downward

display: none; на всех этих элементах портят ваши переходы. Вы не можете отобразить переход css none, потому что он либо true, либо false, и между ними нет.

Вот JSFiddle

person Mathias Rechtzigel    schedule 06. 06.2014

arrow_upward

0
arrow_downward

Хорошо, благодаря этой ссылке, которую кто-то прокомментировал, я придумал следующий CSS, который работает отлично. Я решил, что мне больше нравится, если нет постепенного появления и исчезновения, а просто задержка, но я все еще использую для этого css transition:

#membership_container {
    float: right;
    position: relative;
    vertical-align: top;
    display: inline-block;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #444444;
    text-align: center;
}
#login_button {
    position: relative;
    vertical-align: top;
    display: inline-block;
    float: left;
    height: 100%;
    margin: 0px;
    padding: 0px 10px;
    background-color: #444444;
    border-left: 2px solid #7B7B7B;
    border-right: 2px solid #7B7B7B;
    cursor: pointer;
    cursor: hand;
}
#login_button:hover {
    background-color: #696969;
}
#login_button:hover #login_box {
    visibility: visible;
    opacity: 1;
    transition-delay: .
  5s;
}
#login_text {
    position: relative;
    margin: 9px 0px 0px;
    text-align: center;
    color: white;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
#join_button {
    position: relative;
    vertical-align: top;
    display: inline-block;
    float: left;
    height: 100%;
    margin: 0px;
    background-color: #444444;
    padding: 0px 10px;
    border-right: 2px solid #7B7B7B;
    cursor: pointer;
    cursor: hand;
}
#join_button:hover {
    background-color: #696969;
}
#join_button:hover #join_box {
    visibility: visible;
    opacity: 1.0;
    transition-delay: .5s;
}
#join_text {
    position: relative;
    margin: 9px 0px 0px;
    text-align: center;
    color: white;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
.button_blur {
    background-color: #444444;
}
.button_blur:hover {
    background-color: #696969;
}
.button_focus {
    background-color: #696969;
}
.form_containers {
    z-index: 10;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    border: 5px solid #888888;
    border-radius: 10px 0px 10px 10px;
    background-color: #F1F1F1;
    -o-transition: visibility 0s linear .  5s, opacity 0s linear .5s;
    -ms-transition: visibility 0s linear .5s, opacity 0s linear .5s;
    -moz-transition: visibility 0s linear .5s, opacity 0s linear .5s;
    -webkit-transition: visibility 0s linear .5s, opacity 0s linear .5s;
    transition: visibility 0s linear .5s, opacity 0s linear .5s;
}
#login_box {
    top: 35px;
    right: -2px;
    /*left: -115px;*/
}
#join_box {
    top: 35px;
    right: -2px;
    /*left: -73px;*/
}
.form_inner_containers {
    position: relative;
    margin: auto auto;
    display: block;
    background-color: #F1F1F1;
    border-radius: 10px;
    border: 0px;
}
.form_hidden {
    display: none;
}
.form_shown {
    display: block;
}

person BestAnswer    schedule 06.06.2014

arrow_upward
0
arrow_downward

Если вы установите max-height на 0 пикселей со скрытым переполнением, это будет так, как если бы оно не отображалось и не отображалось.

Затем, когда состояние изменяется, установите max-height на что-то большое (достаточно большое, чтобы вместить область), например, 400 пикселей. Затем он будет выглядеть так, как если бы он не был скрыт в скрытом блоке.

.form_before_state_change {
max-height:0px;
overflow:hidden;
opacity: 0;
-o-transition: opacity .8s linear;
-ms-transition: opacity .8s linear;
-moz-transition: opacity .8s linear;
-webkit-transition: opacity .8s linear;
transition: opacity .8s linear;
}
.form_after_state_change {
    max-height:400px;
    opacity: 1;
}

person Sprose    schedule 24.09.2015

Подборка багов CSS Анимаций и их решений · GitHub

	<h3>Opera</h3>
	<p>1. При комбинировании анимаций, например opacity с box-shadow, могут наблюдаться проблемы в Опере (блок 1) — когда тень полностью исчезает вместе с ховером, при обратной анимации тень возвращается с задержкой и без ожидаемой плавности. </p>
	<div>1</div>
	<p>Что бы избежать бага, нужно отдельно анимировать тень и пробовать подбирать другие значания скорости перехода.</p>
	<p>2. Блоки с псевдоэлементами проблемно анимируются в Opera 12, оставляя схожие артефакты с первым примером (блок 2), причем в Opera 11.64 работает стабильно.</p>
	<div>2</div>
	<h3>Firefox</h3>
	<p>3. Если не указать значение «s» (секунд) в transition, Firefox игнонирует анимацию полностью (блок 1). В блоке 3 выставлено рабочее значение анимации тени в Firefox. </p>
	<div>1</div>
	<div>3</div>
	<h3>Webkit</h3>
	<p>4. В Chrome на маке (как минимум до 23ой верисии), при исползовании transition вместе с transform (блок 4), а так же и при других условиях, ломается сглаживание текст на всей странице.</p>
	<p>Проблему помогает решить backface-visibility, но такой фикс тоже имеет свои последствия.</p>
	<div>4</div>
	<p>5. В Chrome не работает transition если блок меняет свойства с display: block -> display: inline/inline-block (блок 5). Что бы обойти проблему, нужно применять animation (блок 5.1).</p>
	<div>5 text <b>hidden text</b></div>
	<div>5.1 text <b>hidden text</b></div>
	<p>6. В Chrome на Win, во время плавной анимации transform, все инпуты получают белый фон (блок 4 с трансформом и 6 с инпутом).</p>
	<p>Подобный эффект так же наблюдается, если на любой элемент страницы применить backface-visibility.</p>
	<div>4</div>
	<div>6 <input type=»submit»></div>
	<h3>Общие баги</h3>
	<p>7. Нигде кроме Webkit не работает transition на background-image, нельзя поставить даже задержку, картинка меняется мгновенно (7 блок).</p>
	<div>7</div>
	<p>8. Во время transition, блок с анимацией opacity перекрывает другие блоки.</p>
	<p>Что бы избежать проблему, нужно поставить блоки, на которые не нужна анимация ниже в доме (так они автоматически получат выше z-index), либо прописать z-index вручную (блок 8.1).</p>
	<div><span>8.</span>
	<b>no anim</b>
	<i>anim</i>
	</div>
	<div><span>8. 1</span>
	<i>anim</i>
	<b>no anim</b>
	</div>

transition | CSS | WebReference

• Содержание
  • Краткая информация
  • Синтаксис
  • Значения
  • Пример
  • Примечание
  • Спецификация
  • Браузеры

Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.

Значение по умолчанию	all 0s ease 0s
Наследуется	Нет
Применяется	Ко всем элементам, к псевдоэлементам ::before и ::after
Анимируется	Нет

Синтаксис

transition: <переход> [, <переход> ]*

Здесь:

<переход> = [ none | <transition-property> ] || <transition-duration> ||   
   <transition-timing-function> || <transition-delay>

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

none

Отменяет эффект перехода.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>transition</title> <style> #bar { top:-5.5em; right:5em; /* Положение */ padding: .5em; /* Поля */ margin: 0; /* Отступы */ position: absolute; /* Абсолютное позиционирование */ width: 2em; /* Ширина */ background: #333; /* Цвет фона */ color: #fff; /* Цвет текста */ text-align: center; /* Выравнивание по центру */ /* Переход */ transition: top 1s ease-out 0.5s; } #bar:hover { top: 0; } </style> </head> <body> <ul> <li>1</li><li>2</li> <li>3</li><li>4</li> <li>&darr;</li> </ul> </body> </html>

В данном примере при наведении курсора на стрелку раскрывается блок с числами.

Объектная модель

Объект.style.transition

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition.

Opera до версии 12.10 поддерживает свойство -o-transition.

Firefox до версии 16 поддерживает свойство -moz-transition.

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

Спецификация	Статус
CSS Transitions	Рабочий проект

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

10	12	1	26	11.6	12.10	3	6.1	4	16

2.1	4.4	4	16	10	12.10	3.2

Браузеры

В таблице браузеров применяются следующие обозначения.

•  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
•  — свойство браузером не воспринимается и игнорируется;
•  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Анимация

См. также

• :focus на мобильных устройствах
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• Всплывающая подсказка
• Переходы
• Переходы
• Переходы в CSS
• Переходы и анимация
• Переходы с помощью :hover
• Сочетание с псевдоклассами

Рецепты

• Как плавно изменить цвет ссылки?

Практика

• Масштабирование картинки при наведении
• Масштабирование картинки при наведении 2
• Масштабирование кнопки
• Плавное изменение цвета
• Поворот на 360° при наведении
• Прозрачность при наведении
• Сдвиг при наведении

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30. 08.2017

Редакторы: Влад Мержевич

CSS переходы (CSS transition) // «Фрилансер по жизни»

Позволяет вручную установить значения (положительные и отрицательные) для кривой ускорения и создать свою собственную анимацию

Пользовательские функции cubic Bézier с сайта easings.net

Название	Значение функции
easeInSine	cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine	cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine	cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad	cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad	cubic-bezier(0.25, 0.46, 0.45, 0. 94)
easeInOutQuad	cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic	cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic	cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic	cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart	cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart	cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart	cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint	cubic-bezier(0.755, 0. 05, 0.855, 0.06)
easeOutQuint	cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint	cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo	cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo	cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo	cubic-bezier(1, 0, 0, 1)
easeInCirc	cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc	cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc	cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack	cubic-bezier(0. 6, -0.28, 0.735, 0.045)
easeOutBack	cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack	cubic-bezier(0.68, -0.55, 0.265, 1.55)

/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

. button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a;transition-property: all;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55);

}

.button_2{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a;transition-property: all;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.75, 0.99, 0.21, 0.01);

}

.button_3{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a;transition-property: all;transition-duration: 0. 5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.75, -1, 0.21, -1);

}

.button_1,

.button_2,

.button_3:hover{

padding: 0px 50px; background-color: #18b5a4;

}

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */transition: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s;

}

.button_2{

/* все те же стили конкретной кнопки */transition: all 0.5s cubic-bezier(0.75, 0.99, 0.21, 0.01) 0s;

}

.button_3{

/* все те же стили конкретной кнопки */transition: all 0.5s cubic-bezier(0. 75, -1, 0.21, -1) 0s;

}

/* все то же событие */

Transitions Переходы CSS уроки для начинающих академия

❮ Назад Дальше ❯

---

Переходы CSS

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

Пример: Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:

---

Поддержка браузеров для переходов

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26. 0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

---

Как использовать CSS переходы?

Чтобы создать эффект перехода, необходимо указать две вещи:

• свойство CSS, к которому требуется добавить эффект
• Длительность эффекта

Примечание: Если часть Duration не указана, переход не будет иметь эффекта, так как значение по умолчанию равно 0.

В следующем примере показан элемент 100px * 100px Red <div>. Элемент <div> также указал эффект перехода для свойства Width с длительностью 2 секунды:

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

Эффект перехода начнется, когда указанное значение свойства CSS (Width) изменится.

Теперь давайте укажем новое значение свойства Width, когда пользователь наносит указатель мыши на элемент <div>:

Пример

div:hover {
    width: 300px;
}

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

---

---

Изменение нескольких значений свойств

В следующем примере добавляется эффект перехода для свойства Width и Height с длительностью 2 секунды для ширины и 4 секунды для высоты:

Пример

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

---

Укажите кривую скорости перехода

Свойство transition-timing-function указывает кривую скорости эффекта перехода.

Свойство «переход-синхронизация-функция» может иметь следующие значения:

• ease — задает эффект перехода с медленным запуском, затем быстро, затем закончится медленно (по умолчанию)
• linear — задает эффект перехода с одинаковой скоростью от начала до конца
• ease-in — задает эффект перехода с медленным запуском
• ease-out — задает эффект перехода с медленным концом
• ease-in-out — задает эффект перехода с медленным началом и концом
• cubic-bezier(n,n,n,n) — позволяет определить собственные значения в функции кубической Безье

В следующем примере показаны некоторые из различных кривых скорости, которые могут быть использованы:

Пример

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

---

Задержка эффекта перехода

Свойство transition-delay указывает задержку (в секундах) для эффекта перехода.

Следующий пример имеет задержку в 1 секунду перед началом:

Пример

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}

---

Переход + трансформация

В следующем примере также добавляется преобразование в эффект перехода:

Пример

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

---

Другие примеры перехода

Свойства перехода CSS можно задать по одному, например:

Пример

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

или с помощью сокращенного свойства transition:

Пример

div {
    transition: width 2s linear 1s;
}

---

Свойства перехода CSS

В следующей таблице перечислены все свойства перехода CSS:

Свойство	Описание
transition	Сокращенное свойство для задания четырех свойств перехода в одно свойство
transition-delay	Указывает задержку (в секундах) для эффекта перехода
transition-duration	Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода
transition-property	Задает имя свойства CSS, для которого используется эффект перехода
transition-timing-function	Определяет кривую скорости эффекта перехода

❮ Назад Дальше ❯

box-shadow .

3s ease; не работает на hover? / HTML/CSS — русскоговорящее сообщество

React — русскоговорящее с…

Binance Russian

Android Developers

Python

Vue.js — русскоговорящее …

supapro.cxx

GNU/Linux Help

DotNetRuChat

Telegram Developers

Node. js — русскоговорящее…

DevOps — русскоговорящее …

JavaScript Noobs — сообще…

Django [ru]

Go-go!

Angular — русскоговорящее…

phpGeeks

Kubernetes — русскоговоря…

Laravel Pro

pgsql – PostgreSQL

iOS Developers — русского. ..

Смотреть еще

hover?

russian programming html

6 ответов

Похожие вопросы

но как враппер можно грамотно обозвать?

programming html russian

Всем привет, имеется интересный вопросик. Есть сейчас 2 «слоя», первый слой картинка(на который изображены циферки -50 как раз), 2ой слой это просто див с бэкграундом(не могу …

programming html russian

Впитал?

programming html russian

откуда это берется, как отключить знает кто?

programming html russian

Кто шарит в фигме? сделал презентацию и экспортирую в формате pdf. Но там не выделяется текст, а хотелось бы, чтобы можно было

programming html russian

типу 15 лет?

programming html russian

Ну сейчас мне лучше выучить html, css потом реакт, верно?

programming html russian

Алгоритмы и структура данных сильно нужно учить?

programming html russian

<textarea>!!!??? ))))))

programming html russian

Кстати, вы сами фрилансите или в компании работаете?

programming html russian

Смотреть еще

анимаций CSS не работают? Попробуйте эти исправления

CSS-анимация может порадовать посетителей веб-сайта, если все сделано правильно. Тем не менее, иногда их сложно изучить и настроить, в зависимости от того, насколько сложными вы хотите их сделать. Как и многие другие вещи в CSS, иногда CSS-анимация ведет себя совершенно не так, как вы ожидаете.

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

Чтобы помочь вам, мы собрали некоторые распространенные проблемы, с которыми сталкиваются начинающие разработчики (а иногда и опытные!) при создании CSS-анимации, и покажем, как их можно исправить.

Как решить распространенные проблемы с анимацией CSS

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

Нет правила @keyframes

В анимации CSS @keyframes 9Правило 0018 определяет, как выглядит анимация, или, точнее, какие стили элементов изменяются и когда. Без этого правила у вашего элемента не будет никакой анимации. Убедитесь, что ваше правило @keyframes существует и его имя совпадает с именем анимации для целевого элемента.

В приведенном ниже примере попробуйте раскомментировать правило @keyframes , чтобы активировать анимацию.

См. Проблемы с анимацией Pen css: нет ключевых кадров Кристины Перриконе (@hubspot) на CodePen.

 

Продолжительность анимации не задана

Даже если вы назначили элементу правило ключевых кадров, он все равно может не воспроизводиться, если вы не установили продолжительность анимации . По умолчанию цикл анимации CSS длится ноль секунд. Чтобы переопределить это, добавьте правило animation-duration к целевому элементу со значением секунд в том же блоке, что и animation-name .

Ниже попробуйте удалить комментарии вокруг animation-duration , чтобы исправить анимацию.

См. Проблемы с анимацией Pen css: нет продолжительности анимации от Кристины Перриконе (@hubspot) на CodePen.

 

Анимация воспроизводится только один раз

Аналогично, анимация CSS будет повторяться только один раз, если только вы не укажете количество итераций с помощью параметра animation-iteration-count . Это значение может быть определенным числом циклов или бесконечным , если вы хотите, чтобы анимация зацикливалась вечно.

Попробуйте раскомментировать 9Правило 0017 animation-iteration-count ниже.

См. Проблемы с анимацией Pen css: анимация воспроизводится один раз Кристиной Перриконе (@hubspot) на CodePen.

 

Анимированный элемент сбрасывается в конце

Допустим, у вас есть анимация, которая начинается в одном состоянии (например, черный текст) и заканчивается в другом состоянии (например, фиолетовый текст). Если эта анимация воспроизводится только один раз, вы, вероятно, захотите, чтобы цвет оставался фиолетовым после завершения анимации.

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

Хорошей новостью является то, что у CSS-анимации есть решение — свойство animation-fill-mode . Это свойство предписывает анимированному элементу сохранять стили из первого и/или последнего ключевого кадра анимации.

Посмотрите пример ниже. После того, как цвет текста изменится на фиолетовый, вы увидите, что он снова станет черным. Но если мы раскомментируем правило animation-fill-mode: forwards; мы видим, что текст остается фиолетовым. Это связано с тем, что animation-fill-mode: forwards; берет стиль последнего ключевого кадра (фиолетовый текст) и применяет его к элементу после цикла анимации.

См. Проблемы с анимацией Pen css: сброс анимации от Кристины Перриконе (@hubspot) на CodePen.

 

Анимация начинается слишком рано

Иногда может потребоваться добавить короткую задержку перед началом анимации для удобства пользователей. Добейтесь этого с помощью свойства animation-delay . Ниже анимация имеет задержку 4 с (четыре секунды).

См. Проблемы с анимацией Pen css: анимация начинается слишком рано от Кристины Перриконе (@hubspot) на CodePen.

 

Неанимируемые свойства CSS

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

Кроме того, вы можете найти это свойство в справочнике свойств CSS Mozilla, а затем найти Тип анимации под Формальным определением . Эта документация покажет вам различные способы анимации свойства.

Анимация CSS не поддерживается

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

Если ваш браузер обновлен, а проблемы по-прежнему возникают, попробуйте добавить свои правила анимации с префиксами поставщиков в дополнение к исходным правилам и повторите попытку анимации. Например, префикс поставщика — webkit- (для браузеров Chrome и Safari) выглядит так применительно к анимации.

 
 @keyframes change-color { 
     25% { 
      -webkit-color: #00A4BD; 
      цвет: #00A4BD; 
    } 
    50% { 
      -webkit-color: #FF7A59; 
      цвет: #FF7A59; 
    } 
    75% { 
      -webkit-color: #00BDA5; 
      цвет: #00BDA5; 
    } 
    100% { 
      -webkit-color: #6A78D1; 
      цвет: #6A78D1; 
    } 
 } 
 p { 
    -webkit-animation-name: change-color; 
   имя-анимации: изменение цвета; 
    -webkit-animation-duration: 8s; 
   продолжительность анимации: 8 с; 
    -webkit-animation-delay: 4s; 
   задержка анимации: 4 с; 
    -webkit-animation-iteration-count: бесконечно; 
   количество-итераций-анимации: бесконечно; 
 
    семейство шрифтов: Avenir; 
    размер шрифта: 26 пикселей; 
    начертание: 600; 
    выравнивание текста: по центру; 
 } 
 
 

Как показывает этот код, всегда размещайте объявления с префиксами поставщиков перед объявлениями без префиксов поставщиков, чтобы правила префиксов поставщиков не переопределяли исходные правила.

Если вы хорошо разбираетесь в JavaScript, вы также можете обратиться к этому руководству, чтобы определить поддержку CSS-анимации в вашем браузере.

Сокращение CSS написано неправильно

Сокращение CSS — это хороший способ написать более чистый CSS и уменьшить объем кода в вашем файле. Свойство animation является сокращением для следующих свойств CSS:

• animation-duration
• имя-анимации
• анимация-задержка
• направление анимации
• режим анимации-заполнения
• число итераций анимации
• анимация-воспроизведение-состояние
• функция синхронизации анимации

Требуются два значения — одно для animation-duration и одно для animation-name . Кроме того, порядок значений определяет, какое значение присваивается какому свойству анимации. Неверные значения могут привести к тому, что анимация будет вести себя не так, как вы ожидаете. Итак, при использовании сокращенного свойства animation убедитесь, что его значения перечислены в правильном порядке.

Множественные неверные значения свойств анимации

Можно назначить несколько разных анимаций одному и тому же элементу с несколькими значениями, разделенными запятыми. В приведенном ниже примере я применил три разные анимации к одному п элемент.

См. Проблемы с анимацией Pen css: несколько анимаций Кристины Перриконе (@hubspot) на CodePen.

Обратите внимание, что имя-анимации и -продолжительность анимации имеют по три значения. Три значения animation-name назначают три разных правила ключевых кадров элементу p . Три значения animation-duration задают длину для каждого цикла анимации соответственно — первая анимация, change-color длится восемь секунд, а два других — пять секунд.

При создании анимации таким образом убедитесь, что вы правильно упорядочиваете значения для каждого объявления animation-* . В противном случае ваши анимации не будут работать так, как вы планировали.

Если вы хотите применить одно и то же значение свойства ко всем анимациям, вам нужно включить только одно значение в объявление этого свойства. Я сделал это с animation-iteration-count в приведенном выше примере — все три анимации будут работать бесконечно.

Низкая производительность

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

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

Во избежание снижения производительности Google рекомендует ограничить использование анимаций, вызывающих перерисовку. Paint — это когда браузер создает визуальное отображение веб-страницы попиксельно на экране. Отрисовки требуют относительно большой вычислительной мощности, поэтому вам следует максимально ограничить количество перерисовок, вызванных анимацией.

К сожалению, большинство анимируемых свойств CSS вызывают перерисовку при изменении. Исключениями являются transform (для таких вещей, как масштаб, поворот и положение) и opacity , которые можно анимировать с минимальным влиянием на производительность. Вот ссылка, для которой свойства CSS запускают перерисовку при анимации.

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

Отладка анимации CSS с помощью инструментов разработчика

Стоит также упомянуть, что некоторые браузеры оснащены инструментами отладки анимации CSS. Если вы используете Google Chrome или Firefox, проверьте наличие в инструментах разработчика инспектора Animations .

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

Источник изображения

Устранение неполадок с анимацией CSS

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

CSS-анимации могут добавить много символов статической веб-странице, поэтому стоит немного поработать над устранением неполадок, чтобы сделать их идеальными.

Темы: CSS-анимация

Не забудьте поделиться этим постом!

Почему свойства перехода не работают со свойствами отображения?

Посмотреть обсуждение

Улучшить статью

Сохранить статью

• Последнее обновление: 21 дек, 2020

Читать

Обсудить

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Когда мы хотим использовать переход для display:none to display:block , свойства перехода не работают. Причина этого в том, что свойство display:none используется для удаления блока, а свойство display:block используется для отображения блока. Блок не может быть частично отображен. Либо он доступен, либо недоступен. Вот почему свойство перехода не работает.

Итак, для анимации мы используем ключевых кадров CSS.

@keyframes animationname {keyframes-selector {css-styles;}}
 

Что делают ключевые кадры?
Правило @keyframes указывает код для анимации. Когда один набор стилей CSS заменяется другим набором стилей CSS, анимация создается и указывается при каждом изменении стиля. Он может быть в процентах или с ключевыми словами «от» и «до», что будет эквивалентно 0% и 100%. Здесь 0% — это начало анимации, а 100% — конец анимации.

Какой браузер поддерживает ключевые кадры и какой префикс у этого браузера?

• Chrome  & safari=> -webkit-
• Mozilla => -moz-
• Opera => -o-

Code snippet:

< HTML > < HEAD > 9299999330 1 > 929299 1 > 929299 0331 HTML, Тело { Высота: 100%;              заполнение: 0;              шрифт: 20px/40px без засечек; } H2 { отступ: 20px; } DIV { Width: 100%;              фон: розовый;              отступы: 20 пикселей;              дисплей: нет;          }              body:hover div {              display: block;              -webkit-animation: слайд-вниз 2,3 с;              -moz-animation: слайд-вниз 3,3 с;          }              keyframe-down3 @-webkit0003              0% {                  непрозрачность: 0; } 100% { opegy: 1; 10003 : 1; 10003 : 1; } } @-moz-keyframes слайд вниз {             0% {                  0        0        903; } 100% { opegy: 1; 10003 : 1; 10003 : 1;              }          }      style > head >     < body >      < h2 >Наведи меня h2 >      < div >Привет 3 div >1 body >     html >

Output:

Using CSS Transition Opacity for Fade Effects , Проблемы и решения

Переход непрозрачности CSS часто используется для создания постепенного появления и затухание эффектов. Хотя это отлично работает на первом взгляд, это также может быть причиной некоторых трудно обнаруживаемых ошибок с событиями мыши. Основная идея состоит в том, чтобы уменьшить непрозрачность элементов . от 1 (что означает полную непрозрачность) до 0 (что означает полную прозрачность) в для того, чтобы затухать элемент. И действительно элемент с opacity : 0 кажется таким же невидимым, как элемент с видимостью : скрытый . Однако ведет себя как иначе. Элемент с непрозрачностью : 0 по-прежнему получает события и, например, реагирует, когда пользователь нажимает на его ссылки. С другой стороны ссылки закрыты полностью прозрачным элементом, не работают, хотя полностью видно. Это иллюстрирует следующий первый пример. Красиво работающий образец Наведите указатель мыши на строку Над этой линией   Отлично работает Образец Наведите указатель мыши на строку Над этой линией Второй пример теперь показывает проблему с этой техникой: Вот вы видите обычную ссылку, которая, однако, имеет ту проблему, что она не реагировать на нажатие. (Если вы думаете, что этот пример немного построен, есть более реалистичный, но и более сложный пример ниже.) . /div>  Не работающая ссылка         http://www.taccgl.org   Образец помех со ссылкой Нерабочая ссылка http://www.taccgl.org Проблема в том, что элемент c1 перекрывает ссылку. это невидимо из-за непрозрачности : 0 , но он по-прежнему получает щелчки мыши. Таким образом, эти щелчки мыши не попадают на саму ссылку, и, следовательно, ссылка не работает. Добавляя цвет фона и используя непрозрачность: 0,5 сразу становится понятно, что происходит: .0003  Не работающая ссылка         http://www.taccgl.org      Образец, мешающий со ссылкой Нерабочая ссылка http://www.taccgl.org Более реалистичный пример: всплывающее меню Ниже показан более реалистичный пример всплывающего меню. При наведении курсора мыши на кнопку меню появляется меню. Меню появляется и исчезает с использованием перехода непрозрачности. Вы заметите, что ссылка под кнопкой меню не работает. Это вызвано моим меню, которое есть (хотя и полностью прозрачное из-за opacity:0 и, следовательно, невидимый) и получает щелчки мыши, предназначенные для ссылки. Кнопка меню Наведите указатель мыши сюда   Это пример  меню с некоторыми  ссылками   < a target="new" href="http://www.taccgl.org">     http://www.taccgl.org     Не работает ссылка         http://www. taccgl.org      Кнопка меню Наведите курсор сюда Нерабочая ссылка http://www.taccgl.org Обходной путь: сочетание непрозрачности и видимости перехода CSS Идея решения этой проблемы заключается в использовании обоих переходов на непрозрачность и свойство видимости . Переход непрозрачности для визуальный эффект постепенного появления и исчезновения, а также видимость для также скрытие элемента для щелчков мыши. Обратите внимание, однако, что пока работает визуальный эффект затухания, элемент меню должен быть виден, иначе эффект будет не быть видимым. Таким образом, при исчезновении элемент должен стать видимым. сразу во время затухания он должен стать видимым только после прекращения перехода непрозрачности. Именно такое поведение указывается с использованием transition:visibility 1s . Подробное описание видимости перехода css и как сочетать это с визуальными эффектами, такими как непрозрачность и другие видят видимость перехода CSS статья. <стиль >     .menu1  {                    непрозрачность : 0;              видимость : скрыто;              переход: непрозрачность 1 с, видимость 1 с;              позиция : абсолютная;              цвет фона: серебристый;              padding:20px;            }     .mb1   { фоновый цвет:красный; padding:5px }     .mb1:hover ~ .menu1 { opacity : 1; видимость:видимая}     .menu1:hover {непрозрачность : 1; видимость:видимая} Кнопка меню Наведите курсор здесь   Это пример  меню с некоторыми  ссылки        http://www.taccgl.org    < /div>  Теперь рабочая ссылка         http://www.taccgl.org      Кнопка меню Наведите курсор сюда Теперь рабочая ссылка http://www. taccgl.org Заключение Использование перехода css только по непрозрачности для затухания элемента приводит к проблеме что ссылки на выцветший элемент остаются активными, в то время как ссылки на закрытые элементы выцветшим элементом не работают. Мы привели примеры такого поведения и обходной путь, использующий как непрозрачность перехода css, так и видимость перехода css. Статьи блога Параллаксная прокрутка с 3D-ускорением Непрозрачность перехода CSS для эффектов затухания Отображение перехода CSS Видимость перехода CSS Всплывающие анимации WebGL-HTML5 Трехмерные объекты на HTML-страницах Деформация и преобразование HTML Демонстрации 3D Конфигуратор 3D Конфигуратор Продуктов Учебные разделы Первый пример Основные формы Базовые 3D-модели Базовые анимации Цвета и текстуры Интеграция HTML и WebGL Временные переходы Блоки Встраивание JavaScript Внешние 3D-модели Части элементов HTML-элементы на холсте Селекторы анимаций для множественных переходов Гибкие треугольники 9017 9017 Гибкие переходы Множественные переходы Множественные переходы Фрагментные шейдеры Выражения   WebGL™ является товарным знаком Khronos Group Inc. Следующая страница: Отображение переходов CSS Предыдущая страница: Параллаксная прокрутка с 3D-ускорением

CSS-переходы

❮ Предыдущий Далее ❯

---

Переходы CSS

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

Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:

В этой главе вы узнаете о следующих свойствах:

• переход
• задержка перехода
• продолжительность перехода
• свойство перехода
• функция времени перехода

---

Поддержка переходов браузером

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
переход	26,0	10,0	16,0	6,1	12,1
задержка перехода	26,0	10,0	16,0	6,1	12,1
длительность перехода	26,0	10,0	16,0	6,1	12,1
свойство перехода	26,0	10,0	16,0	6,1	12,1
временная функция перехода	26,0	10,0	16,0	6,1	12,1

---

Как использовать переходы CSS?

Чтобы создать эффект перехода, вы должны указать две вещи:

• свойство CSS, к которому вы хотите добавить эффект
• продолжительность эффекта

Примечание. Если часть продолжительности не указана, переход не будет иметь никакого эффекта, поскольку значение по умолчанию равно 0.

В следующем примере показан красный элемент