Вопросы с тегом «css-animations»

Я запускаю анимацию для некоторых элементов, которые установлены opacity: 0;в CSS. Класс анимации применяется к onClick, и, используя ключевые кадры, он изменяет непрозрачность с 0на 1(среди прочего). К сожалению, когда анимация заканчивается, элементы возвращаются opacity: 0(как в Firefox, так и в Chrome). Моим естественным мышлением было бы то, что анимированные …

302 css  css-animations 

В настоящее время у меня есть этот код: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } Он мигает, но мигает только в «одном направлении». Я имею в виду, он только …

288 html  css  css-animations  opacity 

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

196 css  webkit  css-transitions  css-animations 

У меня на клике воспроизводится анимация CSS3 из 4 частей, но последняя часть анимации предназначена для того, чтобы убрать ее с экрана. Тем не менее, он всегда возвращается в исходное состояние после воспроизведения. Кто-нибудь знает, как я могу остановить его на последнем кадре CSS (100%) , или как избавиться от …

181 css  css-animations 

Я просмотрел довольно много демонстраций и понятия не имею, почему я не могу заставить вращение CSS3 работать. Я использую последнюю стабильную версию Chrome. Скрипка: http://jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 40000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: …

158 css  css-animations 

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

157 css  css-transitions  css-animations 

Я действительно хочу, чтобы фрагмент текста моргал в стиле старой школы без использования JavaScript или оформления текста. Нет переходов, только * мигать *, * мигать *, * мигать *! РЕДАКТИРОВАТЬ : Это отличается от этого вопроса, потому что я прошу мигать без непрерывных переходов, в то время как ОП других …

149 html  css  css-animations  blink 

Похоже, что недавно было обновление Google Chrome, которое вызывает размытый текст после выполнения transform: scale(). В частности, я делаю это: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } Если вы …

126 google-chrome  css  webkit  transform  css-animations 

Как я могу воспроизвести две CSS-анимации с разной скоростью ? Изображение должно вращаться и расти одновременно. Вращение будет происходить каждые 2 секунды. Рост будет повторяться каждые 4 секунды. Пример кода: .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; …

120 css  css-animations 

Что-то такое простое должно быть легко выполнено, но я выдергиваю волосы из-за того, насколько это сложно. Все, что я хочу сделать, это анимировать монтирование и размонтирование компонента React, вот и все. Вот что я пробовал до сих пор и почему каждое решение не работает: ReactCSSTransitionGroup - Я вообще не использую …

103 animation  reactjs  css-animations  gsap  react-motion 

Я пытаюсь сохранить свойство анимации CSS после завершения, возможно ли это? Это то, чего я пытаюсь достичь ... Элемент должен быть скрыт, когда пользователь попадает на страницу, через 3 секунды (или что-то еще) он должен исчезать, а после завершения анимации он должен оставаться там. Вот попытка скрипки ... http://jsfiddle.net/GZx6F/ Вот …

93 css  css-animations 

Я пытаюсь анимировать многоточие, и мне было интересно, возможно ли это с помощью CSS-анимации ... Так могло бы быть как Loading... Loading.. Loading. Loading... Loading.. И в основном просто продолжайте так. Любые идеи? Изменить: вот так: http://playground.magicrising.de/demo/ellipsis.html

92 css  css-animations 

Я осмотрелся, но не могу найти то, что ищу. В настоящее время на моей странице есть css-анимация, которая запускается: hover. Я хотел бы изменить это значение на «щелкнуть» или «коснуться», когда размер страницы увеличивается за пределы ширины 700 пикселей с помощью медиа-запросов. Вот что у меня есть на данный момент: …

86 css  css-animations 

Я пытаюсь создать анимацию в стиле американских горок с помощью CSS. Я хочу знать, как изогнуть «каботажное судно», когда оно находится в стадии цикла. Я ищу решение для всего CSS, но если есть необходимость немного JavaScript, я в порядке с этим. мой код до сих пор: #container { width: 200px; …

15 html  css  css-animations  css-transforms