CSS-переходы позволяют изменять свойства в значениях CSS плавно в течение заданного времени.
Я пытаюсь сделать <ul>слайд вниз, используя CSS-переходы. Начало <ul>начинается в height: 0;. При наведении высота установлена на height:auto;. Тем не менее, это заставляет его просто появляться, а не переход, Если я сделаю это от height: 40px;до height: auto;, то он будет скользить...
В настоящее время я разрабатываю «мега раскрывающееся» меню CSS - в основном обычное выпадающее меню только для CSS, но содержащее различные типы контента. На данный момент, похоже, что переходы CSS 3 не применяются к свойству display , то есть вы не можете делать какие-либо переходы из display:...
Кажется, я не могу найти правильный синтаксис для сокращения CSS-перехода с несколькими свойствами. Это ничего не делает: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s,...
Можно ли использовать CSS-переходы, чтобы позволить текстовому абзацу постепенно появляться при загрузке страницы? Мне очень нравится, как это выглядит на http://dotmailapp.com/, и я бы хотел использовать подобный эффект с помощью CSS. С тех пор домен был куплен и больше не имеет упомянутого...
Это довольно простой вопрос, но я не могу найти очень хорошую документацию по свойствам перехода CSS. Вот фрагмент кода CSS: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0...
Я пытаюсь перейти при наведении курсора на миниатюру, чтобы при наведении фоновый градиент исчез. Переход не работает, но если я просто изменил его на rgba()значение, он работает нормально. Градиенты не поддерживаются? Я тоже попробовал использовать изображение, оно тоже не будет переходить. Я...
Можно ли использовать анимацию перехода CSS3 при загрузке страницы без использования Javascript? Это то, что я хочу, но при загрузке страницы: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html Что я нашел до сих пор CSS3 transition-delay , способ задержки эффектов на элементах. Работает...
Есть ли какие-либо события, запускаемые элементом для проверки начала или окончания перехода
Существует ли кросс-браузерное решение для создания слайд-перехода только с CSS, без javascript? Ниже приведен пример содержимого HTML: <div> <img id="slide" src="http://.../img.jpg />...
Итак, я понимаю, как выполнять CSS3-переходы и анимацию. Что не ясно, и я погуглил, это когда использовать какой. Например, если я хочу сделать отскок мяча, ясно, что анимация - это путь. Я мог бы предоставить ключевые кадры, и браузер сделал бы промежуточные кадры, и у меня будет хорошая анимация....
Я пытаюсь создать эффект постепенного появления и исчезновения с помощью перехода CSS. Но я не могу заставить это работать с фоновым изображением ... CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background...
Итак, у меня есть следующие переходы css, прикрепленные к элементу a: a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s ease-in, background-color 0.1s ease-in; transition:color 0.1s...
.item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } Почему это анимирует...
В чем разница между CSS3 переходов ease-in, ease-outи
Я хотел бы применить переход CSS ко всем свойствам, кроме background-position. Я пытался сделать это так: .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions...
В скрипте ниже у меня есть отдельные переходы между видимостью и непрозрачностью. Последнее работает, а первое - нет. Более того, в случае видимости время перехода интерпретируется как задержка при зависании. Происходит как в Chrome, так и в Firefox. Это ошибка? http://jsfiddle.net/0r218mdo/3/...
Можно ли получить уведомление (например, обратный вызов), когда переход CSS завершен?
Я пытаюсь реализовать эффект постепенного исчезновения на чистом CSS. Вот скрипка . Я изучил пару решений в Интернете, однако, прочитав документацию в Интернете , я пытаюсь понять, почему анимация слайдов не работает. Есть указатели? .dummy-wrap { animation: slideup 2s; -moz-animation: slideup 2s;...
Событие завершения перехода Webkit называется webkitTransitionEnd, Firefox - transitionEnd, Opera - oTransitionEnd. Как лучше всего решить их все на чистом JS? Стоит ли анализировать браузер? или реализовать каждый отдельно? Другой способ, который мне не приходил в голову? то есть: //doing browser...
У меня вопрос о скорости рендеринга свойства перехода css3. Предположим, у меня есть несколько элементов: div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin: -100px} span:hover {opacity: 1} a:hover {background-position:...