Вопросы по теме 'css-animations'
CSS3 — переход при удалении DOM
Используя ключевые кадры , можно анимировать элемент, как только он будет вставлен в DOM. Вот пример CSS:
@-moz-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes fadeIn {
from {opacity:0;}
to...
47510 просмотров
schedule
31.10.2023
Как показать части спрайта с ключевыми кадрами CSS для создания анимации?
Я ориентируюсь на старый веб-браузер QT Webkit, который, к сожалению, не поддерживает изменение фонового изображения в ключевых кадрах. Итак, вместо этого я создал спрайт, объединив все 12 кадров, и теперь пытаюсь просмотреть каждый кадр с некоторым...
4570 просмотров
schedule
30.01.2024
CSS-анимация останавливается при запуске функции javascript
Скажем, у меня есть эта функция javascript:
function pauseComp(ms) {
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < ms);
}
и анимация css3 (например, <i...
1921 просмотров
schedule
01.03.2024
Префиксы браузера как переменные через @each sass
У нас запланировано много анимации, и я ищу более чистый способ для всех браузеров. Что-то дерзкое вроде этого было бы здорово:
@each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
@#{$browser}keyframes rotate {
from {...
883 просмотров
schedule
05.10.2022
Переходы CSS и/или Javascript для перемещения div при добавлении или удалении классов
Ищу некоторые идеи о том, что возможно для моего проекта.
У меня есть контейнер div, в который я динамически загружаю контент. Если я хочу, чтобы контент располагался по центру, у меня есть классы, которые я помещаю в контейнер div...
679 просмотров
schedule
22.05.2024
CSS: анимация против перехода
Итак, я понимаю, как выполнять как переходы CSS3, так и анимации . Что неясно, и я искал в Google, так это когда и что использовать.
Например, если я хочу отскочить от мяча, ясно, что анимация - это лучший способ. Я мог бы предоставить...
50031 просмотров
schedule
05.12.2022
CSS-помощь при переворачивании плитки
Поэтому я пытаюсь следовать руководству ( http://davidwalsh.name/css-flip ) о создании плитку и возможность перевернуть ее и иметь другой контент на другой стороне. Я пытался сделать это, но я не могу понять это. Я разместил ссылку ниже на то, что...
329 просмотров
schedule
10.12.2022
Как создать эффект выделения?
Я создаю эффект выделения с помощью анимации CSS3.
#caption {
position: fixed;
bottom: 0;
left: 0;
font-size: 20px;
line-height: 30px;
height:30px;
width: 100%;
white-space: nowrap;...
127563 просмотров
schedule
08.05.2024
Анимация CSS с режимом заполнения, включая переход, не работает в Firefox должным образом
Это прекрасно работает в Chrome, но не в Firefox (вот онлайн-демонстрация ) :
HTML
<div class="box"></div>
CSS
.box {
background-color:blue;
width:100px;
height:100px;
margin: 0 auto;
transform:...
1596 просмотров
schedule
29.01.2024
Кнопка «Поделиться» в Facebook нарушает анимацию CSS в IE11
Эта проблема начала возникать в последние пару недель, поэтому она может быть связана с обновлением IE11 или изменением виджета FB.
У меня есть кнопка «Поделиться в FB» на моем сайте.
<script>
(function (d, s, id) {
var js,...
314 просмотров
schedule
22.05.2024
Возможен ли такой эффект свечения?
Увидев этот дриббл-шот:
https://dribbble.com/shots/665300-Progress-bar
Мне действительно интересно, возможно ли воссоздать эффект свечения. Лучшим сценарием было бы, чтобы он работал динамически, может быть, даже мерцал и т. д.
Вероятно,...
554 просмотров
schedule
14.11.2022
Как прозрачно замаскировать объект, чтобы был виден только фон?
Цель
Я хотел бы создать анимированный многоугольник, части которого обрезаны/вырезаны/замаскированы, чтобы слой/элемент/фон под ним можно было увидеть следующим образом:
Я создал анимацию с преобразованием CSS3. Это вращающийся блок,...
110 просмотров
schedule
02.04.2024
изменение изображения во время флип-анимации css
В настоящее время у меня есть вращающееся изображение, которое переворачивается и имеет надпись на обратной стороне с использованием анимированного css, однако я хочу, чтобы при переворачивании изображения оно менялось с другим изображением, поэтому...
3617 просмотров
schedule
04.04.2024
Последовательность нескольких ключевых кадров анимации CSS и задержка не работают
Я создал 2 ключевых кадра. Первый ключевой кадр применяется ко всем элементам с классом .drop-in . И 2-й ключевой кадр специфичен для элемента с классом .look-at-me , когда закончилась анимация 1-го ключевого кадра.
Проблема в том, что,...
3616 просмотров
schedule
30.09.2022
Преобразование CSS3 в JQuery fadeIn() не работает
Я пытаюсь заставить некоторый контент переворачиваться и исчезать при нажатии. Кажется простым, но у меня возникли некоторые трудности!
Для этого я использую методы fadeIn() и fadeOut() JQuery и преобразование CSS3, но в настоящее время он...
29 просмотров
schedule
19.09.2022
Как анимировать форму пути без использования SMIL?
Фрагмент ниже показывает, что я хочу сделать. Но есть некоторые проблемы:
Как сделать эту анимацию без использования SMIL? SMIL устарел и плохо поддерживается браузерами.
Как сделать так, чтобы черный путь проходил через правый конец синего?...
951 просмотров
schedule
30.11.2023
Есть ли стандартный способ предоставить alt = text для программ чтения с экрана в рекламе / анимации HTML5?
Существует ли при создании анимации HTML5 метод, который можно использовать для «синхронизации» альтернативного текста, чтобы средства чтения с экрана читали данный элемент, который появляется в момент его появления (или запускается событием /...
1030 просмотров
schedule
13.06.2024
css анимация с GSAP
Как можно добиться этой анимации с помощью GSAP. Вот css-код
.element {
-webkit-animation-name: fall, opacity;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes fall {
0% {...
214 просмотров
schedule
12.12.2023
Анимация ключевых кадров не работает с элементом :hover в moz и
Я столкнулся с проблемой, когда я хочу анимировать некоторый текст внутри кнопки на: hover. Чтобы нацелить текст кнопки, я обернул его внутри элемента span и нацелил его следующим образом:
button:hover span{
animation:...
}
Это хорошо...
237 просмотров
schedule
17.04.2024
Перезапустите анимацию CSS с помощью javascript после завершения предыдущей
Я пытался использовать новую функцию animate() для перезапуска анимации CSS. Я использую Chrome 48, но мне интересно, возможно ли это прямо сейчас.
Анимация должна быть просто растущим и уменьшающимся квадратом. Как видите, я пробовал несколько...
1294 просмотров
schedule
13.02.2024
