Articles of анимация

Слайд отключается от экрана с помощью jQuery + добавлены стрелки навигации

Может ли кто-нибудь помочь с добавлением навигационных стрелок к fragmentу кода, найденному здесь Слайд div с экрана с помощью jQuery и первый ответ, данный …. http://jsfiddle.net/jtbowden/ykbgT/2/ Я хочу иметь возможность добавлять стрелки направления или предыдущие / следующие ссылки Код ниже HTML: Div #1 Div #2 Div #3 Div #4 Div #5 CSS: body { padding: […]

оживить встроенный стиль обратно в исходное состояние

Я реализовал решение CSS для анимации стиля, который установлен в ряд с помощью CSS-Tricks . Также используется помощь от SO, чтобы текст смешивался с CSS У меня есть анимация метки, идущей в обоих направлениях (при загрузке и сбросе), но сам индикатор выполнения сразу же переходит в нуль Ширина div устанавливается следующим образом: И анимация onload […]

CSS-анимация не работает, изменяя верхнее значение

С помощью этого JQuery я меняю вертикальное положение формы, но у меня есть проблема с анимацией: я хотел бы оживить изменение позиции, чтобы пользователь мог видеть, что поле ввода перемещается в новое положение. Почему анимация не работает? http://jsfiddle.net/p6m97gwb/ Если это возможно, я хотел бы использовать animate.css HTML CSS #searchMainWrapper { -webkit-animation: animate 3s; /* Safari […]

CSS-анимация “застряла”

Я сделал видео, чтобы показать вам точную проблему (вверх). У меня есть анимация карт. 1-я анимация – это когда вы загружаете страницу, эти карты автоматически летают. .card{ animation: startup .5s ease-in-out .2s 1 forwards; } @keyframes startup { from {top: -150px; opacity: 0;} to {top: 0px; opacity: 1;} } Затем у меня есть анимация, когда […]

Анимационные сбои на веб-сайте

Я сделал небольшой эксперимент, где я тестировал анимацию, которая произойдёт, когда вы снова нажмете на желтый квадрат, в jsfiddle ниже: http://jsfiddle.net/aritro33/v86tE/5/ Тем не менее, я пытаюсь переместить анимацию, увиденную в этом jsfiddle, на jsfiddle здесь, когда вы нажмете кнопку compose / post circle /. Анимация будет применена к сообщениям. Это jsfiddle: У меня возникают проблемы, […]

Как сделать анимацию для анимации в обратном порядке?

У меня есть анимация на моем сайте, которая идет от width: 100px to 800px при наведении курсора . Но при наведении курсора он просто переходит в нормальное положение без анимации. Как я мог получить его, чтобы анимация вернулась на ходу – так же, как она появилась? Я только нашел решения для переходов, но мне это […]

CSS-анимация

Я пытаюсь сделать анимацию, как будто я печатаю. Для этого я использую «шаги» анимации CSS. Сама анимация прекрасно работает. Однако, если я хочу анимировать несколько строк текста, все они начинают воспроизводиться одновременно. Это не дает мне желаемого эффекта. (Пробовал использовать в одном , который отрезал текст, но снова начал анимацию одновременно). Чтобы противостоять этому, я […]

Запустить анимацию CSS JavaScript

Как начать анимацию CSS с помощью js? первая строка (webkitAnimation) работает, а другие – нет. anim_logo.style.webkitAnimation=”threesixty 3s”; anim_logo.style.mozAnimation=”threesixty 3s”; anim_logo.style.oAnimation=”threesixty 3s”; anim_logo.style.animation=”threesixty 3s”; Зачем? live preview (Нажмите на звезду ниндзя)

Джиттер на хром css анимации

Попытка сделать анимацию css, которая исчезает на изображении из центра, используя два центрированных div с тем же фоновым изображением [svg] и анимацию их ширины и фоновой позиции. Проблема в том, что на хроме есть ужасная проблема дрожания (возможно, из хрома, проходящего через шаги анимации, вместо того, чтобы делать их одновременно?) Вот jsfiddle: http://jsfiddle.net/evankford/s2uRV/4/ , где […]

Отключение GIF-анимации в HTML

Есть ли способ, в HTML, включить анимированный GIF в тег , но автоматически указывать GIF не анимировать? Я понимаю, что пользователь может остановить анимацию, нажав ESC или нажав кнопку «Стоп», но я хочу, чтобы GIF не анимировали вообще. Я только хочу сделать это на одной конкретной странице, и сделать отдельные неанимированные версии (1500+) GIF не […]