Запитання з тегом «css-animations»

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

301 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 перехід-затримка , спосіб затримки впливу на елементи. Працює лише на наведення. CSS3 Keyframe , працює на навантаженні, але надзвичайно повільний. Не …

196 css  webkit  css-transitions  css-animations 

У мене 4-частина CSS3-анімації, яка грає при натисканні - але остання частина анімації призначена для того, щоб зняти її з екрана. Однак він завжди повертається до свого початкового стану, як тільки грав. Хто-небудь знає, як я можу зупинити його на останньому кадрі css (100%) , або як позбутися цілого діва, …

180 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 або прикраси тексту. Ніяких переходів, лише * блимати *, * блимати *, * мигати *! EDIT : Це відрізняється від цього питання, оскільки я прошу блимати без безперервних переходів, тоді як ОП з інших питань запитує, як …

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); } } Якщо ви відвідаєте http://rourkery.com в …

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 …

119 css  css-animations 

Щось таке просте має бути легко здійснено, але я вириваю волосся, наскільки це складно. Все, що я хочу зробити, - це анімувати монтаж та демонтаж компонента React, ось і все. Ось те, що я намагався дотепер, і чому кожне рішення не буде працювати: ReactCSSTransitionGroup - Я взагалі не використовую класи …

97 animation  reactjs  css-animations  greensock  react-motion 

Я намагаюся створити анімацію багатоточия, і мені було цікаво, чи можливо це з анімацією CSS ... Тож це може бути як Loading... Loading.. Loading. Loading... Loading.. І в основному просто так продовжувати. Будь-які ідеї? Редагувати: так: http://playground.magicrising.de/demo/ellipsis.html

93 css  css-animations 

Я намагаюся отримати властивість анімації CSS, щоб вона залишалася після завершення, чи можливо це? Це те, чого я намагаюся досягти ... Елемент повинен бути прихований, коли користувач потрапляє на сторінку, через 3 секунди (або що завгодно) він повинен зникати, а після завершення анімації він повинен залишатися там. Ось спробу скрипки …

92 css  css-animations 

Я оглянувся навколо, але не можу повністю знайти те, що шукаю. Наразі на моїй сторінці є анімація css, яка ініціюється: hover. Я хотів би, щоб це змінилося на "клацання" або "торкання", коли розмір сторінки перевищує ширину 700 пікселів за допомогою медіа-запитів. Ось що я маю на даний момент: http://jsfiddle.net/danieljoseph/3p6Kz/ Як …

84 css  css-animations 

Нещодавно я виявив, як "правильно" використовувати анімації CSS (раніше я відхилив їх, оскільки не мав змоги створювати складні послідовності, як це можна було робити в JavaScript). Тож зараз я дізнаюся про них. Для цього я намагаюся зробити градієнтний "спалах", що проходить через елемент, подібний до індикатора прогресу. Подібно до впливу …

81 css  css-animations 

Я створюю ефект обертання землі в CSS. Я створив глобус у CSS: body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: rotate; animation-duration: …

75 html  css  css-animations