css-transitions- все статьи тега


CSS3 эффект перехода с onclick

Я работаю над CSS3 и как бы застрял на одной проблеме. Проблема заключается в следующем: У меня есть изображение, которое изначально находится в левой части экрана: .box img{ margin-left:0; -webkit-transition:1s; } Теперь, при наведении, когда я хочу, чтобы эффект имел место, т. е. переместите изображение 500px слева, когда я наведу курсор на изображение, следующий код: .box img:hover{ margin-left:500px; -webkit-transition:1s; } Это работает просто идеально. Единственная проблема за ...

Как резко остановить линейный анимированный ползунок jQueryUI handle (crossbrowser)

Мы используем слайдер jQuery для нашего слайд-шоу. Теперь ручка анимируется во время воспроизведения. Но если пользователь делает паузу, ручка должна быть немедленно установлена в неподвижное положение (т. е. анимация должна быть остановлена). Сначала я подумал, что будет проще всего использовать опцию animate (http://api.jqueryui.com/slider/#option-animate ) из слайдера. Но я не нашел способа создатьлинейную анимацию. Таким образом, мы решили эта проблема теперь с помощью CSS-переходов. Есл ...

Предотвратить мерцание на webkit-переход webkit-transform [дубликат]

Возможные Дубликаты:iPhone webkit css анимации вызывают мерцание по какой-то причине прямо перед моей анимацией свойства webkit-transform происходит небольшое мерцание. Вот что я делаю: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "translateX(" + value + "px)"); прямо перед переходом происходит мерцание. Любая идея, почему это так, и как я мог бы исправить проблема? спасибо! обновление: это происходит тол ...

CSS3 анимация перехода при загрузке?

можно ли использовать анимацию перехода CSS3 при загрузке страницы без использования Javascript? это своего рода то, что я хочу, но на странице загрузки: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html то, что я нашел до сих пор CSS3 переход-задержка, способ задержки воздействия на элементы. Работает только при наведении курсора. ключевой кадр CSS3, работы по нагрузка, но чрезвычайно медленно. Не полезно из-за этого. переход CSS3 достаточно быстро, но не анимации при загру ...

CSS: анимация против перехода

Итак, я понимаю, как выполнять как переходы CSS3, так и анимации. Что не ясно,и я погуглил, когда это использовать. например, если я хочу, чтобы мяч отскочил, ясно, что анимация-это путь. Я мог бы предоставить ключевые кадры, и браузер будет делать промежуточные кадры, и у меня будет хорошая анимация. , есть случаи, когда указанный эффект может быть достигнут в любом случае. Простой и распространенный пример был бы реализуйте меню выдвижного ящика в стиле facebook: этот эффект может быть дос ...

Как нормализовать функции перехода CSS3 между браузерами?

событие конца перехода Webkit называется webkitTransitionEnd, Firefox-transitionEnd, opera-oTransitionEnd. Каков хороший способ решения всех из них в чистом JS? Должен ли я делать браузер нюхать? или реализовать каждый из них отдельно? Каким-то другим способом, который мне не приходил в голову? ie: //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ ...

CSS-перехода, когда класс удаляется

у меня есть форма, которая функционирует как параметры страницы. При изменении элементов формы они помечаются как unsaved и имеют другой цвет границы. Когда форма сохраняется, они помечаются как сохраненные, имея другой цвет границы. Я хочу, чтобы при сохранении формы граница постепенно исчезала. заказ пойдет: <input type='text' class='unsaved' /> Not saved yet, border is yellow <input type='text' class='saved' /> Saved, so the border is green <input type='text' class='' /&gt ...

Может ли 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 */ -webk ...