Описание тега css-animations
CSS animations make it possible to animate transitions from one CSS style configuration to another. CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
2
ответа
Анимация ReactCSSTransition не гладкая для изображения
Я попытался реализовать анимацию постепенного появления / исчезновения в React с использованием ReactCSSTransitionGroup. Я следовал этому решению в предыдущих SO ответах. У меня есть компонент, который содержит изображение и текст. Анимация плавная …
10 апр '18 в 11:59
5
ответов
Расширение кругов с помощью CSS3-анимации
Я пытаюсь сделать так, чтобы при загрузке страницы появлялись круги, что нормально, но мне нужно, чтобы они росли наружу, такие маленькие, большие от центра, а не от верхнего левого угла: Вы можете увидеть, что у меня есть в настоящее время здесь: h…
16 фев '12 в 23:22
3
ответа
Изменение анимации css с абсолютного на относительное
Я нашел эту волновую анимацию " https://codepen.io/tedmcdo/pen/PqxKXg" и хотел бы использовать ее над своим заголовком на своей странице, но проблема в том, что анимация написана для абсолютных значений, но я бы нужна относительная позиция, так как …
06 июл '17 в 21:42
1
ответ
Сделать анимацию для изображения, идущего слева направо, пока не исчезнет
У меня проблема при создании анимации с помощью CSS3. вот моя скрипка: http://jsfiddle.net/fyanz92/m98jy/2/ мои коды: .loading { width: 250px; height: 50px; background: #CEE7D3; margin: auto; z-index: 1005; top: -3px; padding: 15px; border-radius: 0…
27 мар '14 в 10:00
2
ответа
Материал дизайн иконки css вращение не по центру
Я пытаюсь сделать загрузочный вертел со значком с https://materialdesignicons.com/ но значок не только вращается, но и слегка смещается от центра. У меня есть эти стили: @keyframes spin-animation { to { -webkit-transform: rotate(360deg); transform: …
27 мар '18 в 19:15
1
ответ
Простая анимация ключевых кадров CSS3 не работает в Firefox
Я создал одну простую анимацию ключевых кадров CSS3, которая переключает изображение элемента. Он работает отлично, но мой верный Firefox подвел меня. Сначала я использовал префикс free, потом подумал, что это может быть проблемой, после этого я нап…
25 июл '13 в 23:00
0
ответов
Свойство высоты не применяется одинаково ко всем элементам div с одинаковой высотой
Есть очень странная проблема, с которой я сталкиваюсь на веб-странице, которую я разрабатываю. Это простой HTML и CSS, и я пытаюсь создать анимацию в нижней части каждого элемента привязки. Все они имеют одинаковую ширину 25%, так как я использую се…
18 июн '18 в 14:51
1
ответ
Центр содержания SVG
У меня есть такой SVG как ниже. Прямо сейчас круг занимает весь размер SVG. Как сделать так, чтобы SVG имел определенный размер (скажем, 215x250), а круг должен иметь размер 16 в центре SVG. Также было бы здорово анимировать этот центрированный круг…
09 авг '17 в 12:02
2
ответа
:: выбор анимации
Почему не animation собственность работает на ::selection селектор в CSS? Демо-страница /* Basic test case: */ body{ color:blue; } @keyframes slc{ 50%{ color:red; } } @-webkit-keyframes slc{ 50%{ color:red;; } } /* Custom Selection Styles */ ::selec…
16 мар '13 в 23:20
2
ответа
Есть ли способ сгруппировать специфичные для браузера анимации css3?
Я хочу сделать CSS3-анимацию, в которой div получает тень от мыши и теряет ее при выводе мыши. Это то, что я до сих пор: HTML: <div id="page"> <div id="container" onmouseover="mouseOverContainer()" onmouseout="mouseOutContainer()" class=""&…
26 май '14 в 09:03
1
ответ
Позволит ли оптимизация CSS3-анимации без отключения H/W ускорить ее запуск на GPU?
Сначала это звучит странно, но терпите меня. Я написал бенчмарк на основе setTimeout (аналог stats.js) - идея была в том, чтобы было что сравнить, как анимация работает в разных условиях (например, добавление к ней различных свойств CSS3). Для (прос…
27 июл '12 в 14:55
1
ответ
Остановить вращение анимации на CSS
Мне нравится знать, как я могу плавно остановить анимацию вращения (css) в произвольном положении без нажатия кнопки. span.glyphicon-arrow-up { position: absolute; top: 31%; left: 36%; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinit…
03 май '16 в 07:47
1
ответ
Div Alignment при использовании твиттера Любимая анимация
Я видел пример для Twitter Favorite animation и использовал его в своем дизайне для тестирования, и теперь у меня проблема с выравниванием значков, и я не знаю, как это исправить? Может кто-нибудь объяснить мне, пожалуйста? Ниже вы будете использова…
05 мар '18 в 18:04
1
ответ
Ключевые кадры CSS с использованием calc с Mircrosoft Edge
Таким образом, кажется, что Microsoft Edge не позволяет использовать CSS calc() в @keyframes? @keyframes logoanimatestart{ from {transform: rotateY(360deg); width:50px; height:50px;top:-80px; left:100%;} to {transform: rotateY(0deg); width:100px; he…
04 сен '15 в 13:31
1
ответ
Показать div снизу справа вверху слева
Можно ли даже показать скрытый элемент div, используя эффект изменения размера с анимацией CSS3 снизу справа вверху слева? Надеюсь, эта картина поможет:
10 мар '16 в 09:07
1
ответ
Уменьшить (масштабировать) изображение, чтобы оно соответствовало родителю, не показывая фон
Мне нужно масштабировать или уменьшать изображение, чтобы заполнить его контейнер, но мне нужно, чтобы это происходило плавно и без отображения желтого фона. Есть ли способ уменьшить масштаб и не показывать фон? Я могу сделать это, если я устанавлив…
31 янв '18 в 21:57
1
ответ
CSS3 анимация при наведении курсора не отвечает
Я пытаюсь заставить подпись figcaption появляться / исчезать при наведении курсора внизу. Но я не могу получить тег divcaption div, кажется, исчезает с экрана. Я хочу, чтобы при наведении курсора на баннер, figcaption появлялся независимо от того, г…
22 июн '14 в 14:09
2
ответа
Как я могу позволить моей анимации гамбургера вернуться?
Я не могу заставить мою анимацию работать плавно. Я создал иконку бургера, с тремя элементами, например: <div class="container"> <div class="burger-contain"> <div id="line-1" class="line"></div> <div id="line-2" class="lin…
30 ноя '18 в 09:56
2
ответа
Работают ли CSS анимации строго по времени?
То есть, если я установлю анимацию на 1 секунду, всегда ли она будет занимать ровно 1 секунду (т. Е. Пропускать кадры для достижения этого интервала)? Вторая часть моего вопроса касается того, как использовать CSS-анимацию в асинхронных вызовах Java…
03 янв '12 в 16:11
1
ответ
Динамическая продолжительность для анимации SCSS на основе текущих атрибутов
Я наткнулся на следующий индикатор выполнения. Тем не менее, я заметил, что импульсная анимация на компонентах панели имеет постоянную длительность, что означает, что она будет играть намного быстрее, чем дольше цветная полоса. Соответствующий (сокр…
01 июн '18 в 13:35