Articles of анимация

Эффект jQuery Bounce при щелчке без jQuery UI

Я не могу найти решение для анимации, чтобы сделать откат div, используя только анимацию jQuery. Что-то вроде не работает: $(“#bounce”).click(function() { $(this).effect(“bounce”, { times: 3 }, 300); });.​ Я бы предпочел не использовать jQuery UI или любой внешний плагин, например, облегчить его. Эффект колебания был бы столь же хорош в моем случае, так и сделаете. […]

Эффект случайных чисел в JQuery

Я застрял. Я пытаюсь получить jquery для загрузки страницы сгенерировать анимацию с помощью чисел. Чтобы число 5 переключалось между 0 – 9 до тех пор, пока не наступило выделенное время, или если у меня будет 50, 5 будут проходить через 0 – 9, а 0 также будет проходить через 0 – 9. Спасибо всем за […]

Как создать анимацию прокрутки текста с помощью только HTML и CSS (или java, которые я думаю), например, как яблоко, которое использовалось для их живого изображения?

У меня есть баннер в верхней части моего веб-сайта, синий с легким радиальным gradleиентом на левой стороне. Я хочу иметь анимированный белый текст, который прокручивается в правой части баннера. Я хочу, чтобы он затухал, когда он появляется, а затем исчезает. Я хотел бы сделать это без использования Flash и как можно меньше Java. Я могу […]

Как создать вертикальную карусель с использованием простого JavaScript и CSS

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

GIF не анимируется при загрузке страницы

Я пытаюсь создать всплывающую страницу (я знаю, я пытался поговорить с ним из нее), которая отображает анимацию логотипа (.gif) и кнопку для входа на веб-сайт. Пока у меня есть div который содержит изображение, однако изображение не оживляет, как можно было бы ожидать. Удивительно, но каждый раз в Internet Explorer анимация изображения. Как мне решить это? […]

Анимирование дорожки SVG заполняет нижний верх

У меня есть SVG с несколькими путями, которые я пытаюсь оживить. Моя цель – иметь анимацию, которая медленно заполняет цвет снизу вверх с разными цветами на каждом пути. Я пробовал играть с lineargradient, но не мог понять, как использовать его с путями. Я создал следующий SVG: https://jsfiddle.net/812x1tqu/ .st0{fill:#0000FF;stroke:#000000;stroke-miterlimit:10;} .st1{fill:#FF00FF;stroke:#000000;stroke-miterlimit:10;} Таким образом, синий будет медленно заполняться […]

Неактивное положение элементов анимации

Я пытаюсь реализовать сетку, которую вы можете перетащить. Я нашел драгулу , которая точно соответствует моим потребностям! Единственное, что мне нужно, чтобы плитки оживлялись, когда они уходили с пути, чтобы впустить тащину. (Надеюсь, это ясно. :)) Я попробовал добавить transition: all 1s ease-out , но все, что было сделано, было анимировано непрозрачностью. Как я могу […]

Проблема с анимацией CSS в IE10

Проблема, с которой я сталкиваюсь, заключается в том, что небольшая часть созданного мной веб-сайта отлично работает во всех браузерах и в старых версиях IE, но не в самых новых версиях. Как вы, возможно, знаете, IE больше не поддерживает инструкции [IF] в HTML и, похоже, не поддерживает эту команду. Моя проблема заключается в небольшой анимации нескольких […]

Поворот анимации CSS назад

На моей маленькой тестовой странице html у меня есть 4 элемента. Эти элементы воспроизводят анимацию CSS, когда она зависает, но я хотел бы, чтобы анимация была обратная, когда пользователь перестает парить над ними. -webkit-animation-direction:alternate; не работает. Мой текущий код выглядит следующим образом: div:hover{ -webkit-animation: animationFrames ease 1s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 0% 0%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, […]

Анимация перемещения div снизу вверх.

У меня есть изображение с наложением текста внутри коробки. Это отзывчивый дизайн, поэтому коробка не имеет фиксированных размеров. Я хочу переместить наложение текста сверху вниз, но с приятной гладкой анимацией, которая делает это. Анимация должна играть с зависанием. Я уже понял, как это сделать, но у меня нет анимации. Это примерно соответствует HTML: The Title […]