Articles of css переходы

CSS3 скрытый div исчезает в наведении?

У меня есть мой jsfiddle. http://jsfiddle.net/xC5wN/ Я в основном хочу, чтобы скрытый div был открыт, когда он завис над мышью. Он будет частью навигационной панели, и описание страницы будет медленнее. Я пробовал использовать -webkit-transition: all 0.5s ease-in-out; но безрезультатно. Вот мой код: .aboutnav { background-color: #a661ca; } .aboutcontents { display: none; } .aboutnav:hover .aboutcontents { […]

Переходы CSS: странная нежелательная задержка в браузерах Webkit (Chrome и Safari)

Я надеялся, что кто-то сможет объяснить странное поведение, которое я испытываю в браузерах Webkit, с нежелательными задержками в переходах CSS. Вот ссылка на страницу, над которой я работаю: http://demo.daised.com/help-me Желаемый результат состоит в том, чтобы строка меню уменьшалась, когда пользователь прокручивает страницу вниз. Это прекрасно отражается на Firefox. Однако в браузерах Webkit переход на размер […]

Переходы CSS не обновляют состояние зависания

Когда вы перемещаете объекты, состояние зависания не обновляется (правила CSS с помощью :hover ), пока вы не переместите мышь. Когда вы перемещаете элементы DOM под мышью пользователя (с transition или каким-либо другим эквивалентом), состояние зависания не обновляется до тех пор, пока мышь не перемещается. Есть ли обходной путь для этого? Я не хочу входить в […]

Как изменить css с помощью переменных, чтобы сделать анимацию

Как изменить значения CSS с помощью JavaScript? Я сделал этот код, но он не работает: var num = 100; function fillDiv{ var a=document.getElementById(“principal”); for (var i = 0; i<100; i++){ num=num-25; a.style.background="-moz-radial-gradient(#FFFFFF "+num+"%, #006699 200%);"; if (num==0){ break; } } В окне отладки все прошло хорошо, но когда я проверяю его на теге элементов, значение […]

Есть ли более эффективный способ делать многоступенчатые анимации?

Я пытаюсь сделать переходы очень похожими на то, что у меня есть в приведенном ниже примере кода. Здесь он работает очень хорошо, но когда я использую его на реальном сайте, он почти никогда не работает. Некоторые переходные задержки, кажется, пропущены, и это не так гладко, как в этом упрощенном примере. На этом сайте я пытаюсь […]

Создание круга с пунктирной границей в css и анимация при наведении

Я пытаюсь оживить круг css. Когда пользователь зависает, граница круга должна стать пунктирной линией, и она должна анимироваться как вращающееся колесо. Я могу заставить его вращаться в течение заданного времени, но я не смог найти способ его анимации, пока указатель мыши не зависает на нем, а затем остановит анимацию, когда указатель мыши вынут из круга […]

Перемещение по центру текста влево / вправо, без переполнения

Мне удалось перевести text-align из center left . С помощью этого кода, если вы запустите его, затем наведите указатель мыши, вы увидите, что верхний идет влево. Однако нижнее переполнение right ; как я могу понять, как сделать переход right не переполнением? Примечание. Это демонстрация моего реального приложения, в котором есть строки / элементы неизвестной / […]

Переход CSS при перемещении поплавка

Я работаю с чем-то вроде этого: http://jsfiddle.net/Hh2Ht/ Как вы можете видеть, у меня есть группа плавающих divs с одинаковой шириной, но с разной высотой. Тем не менее, контейнер имеет процентную ширину и в качестве consecuence, когда изменяется его размер, плавающие divs меняют свое положение. Я бы хотел, чтобы это изменение позиции было анимировано, используя css-переходы. […]

Firefox CSS3 объектно-ориентированный: обложка странного поведения во время перехода

У меня есть img внутри div с точной width и height . Я хотел бы разместить изображение там, например, background-size: cover чтобы заполнить весь div поэтому HTML: И CSS: .cover { width: 400px; height: 180px; position: relative; } .cover img { visibility: hidden; opacity: 0; width: 100%; height: 100%; object-fit: cover; -webkit-transition:visibility 0s linear 4.0s,opacity […]

Может ли размер шрифта перехода CSS3?

Как можно увеличить размер шрифта на мыши? Цветовые переходы отлично работают со временем, но размер шрифта сразу же по какой-то причине переключается. Образец кода: body p { font-size: 12px; color: #0F9; transition:font-size 12s; -moz-transition:font-size 12s; /* Firefox 4 */ -webkit-transition:font-size 12s; /* Safari and Chrome */ -o-transition:font-size 12s; transition:color 12s; -moz-transition:color 12s; /* Firefox 4 […]