Вопросы по теме 'css-animations'

Получить новую позицию элемента после анимации перевода CSS3?
Я использую анимацию перевода CSS3, чтобы переместить объект, скажем, на 10 пикселей. @-webkit-keyframes move{ 0% {} 100% { -webkit-transform: translate(10px); } } Если изначально объект был слева=10px, то теперь он должен быть...
2337 просмотров
schedule 11.11.2023

jQuery — скажите, когда анимация CSS достигает 100%
Есть ли способ определить, когда анимация достигает 100% своей анимации с помощью jQuery? {0%{-xxx-transform:translate(0,0);} 100%{-xxx-transform:translate(-500px, 300px); opacity: 0.1;}
335 просмотров
schedule 07.03.2023

Animate.CSS добавляет полосу прокрутки?
Я использую Animate.CSS и эффект "петли", чтобы изображение выпадало за пределы экрана. Когда он уходит с экрана, он добавляет на страницу вертикальную полосу прокрутки. При прокрутке ничего не видно. Почему добавляется эта полоса прокрутки и как...
4271 просмотров

Переход rotate3d или matrix3d ​​работает некорректно в IE10
Я пытаюсь сделать эффект перелистывания страниц в IE10. Когда я делаю преобразование с помощью rotateY(180deg) , оно работает хорошо, но с rotate3d(0,1,0,180deg) оно делает странный переворот на 90 градусов (только в IE10!). Взгляните на этот...
842 просмотров

трансформировать элемент масштаба, когда к нему применяется анимация ключевого кадра
У меня есть элемент, к которому применена анимация css3 с ключевыми кадрами, но я все же хочу масштабировать этот элемент. Но кажется, что, поскольку transform translate уже применяется в анимации, transform scale не работает. например:...
3905 просмотров
schedule 20.07.2023

Восход и закат не гладкие с анимацией CSS3 и линейным градиентом
Я разрабатываю анимацию восхода и заката с помощью CSS3. Пожалуйста, проверьте время выполнения вывод jsFiddle . Солнце переходит из одного цвета в другой, как и ожидалось Полдень Нажмите, чтобы увеличить изображение После полудня...
4268 просмотров

css3animation + box-shadow не работает в Safari и Opera
Я реализовал эффект box-shadow в div с помощью анимации CSS3... Код отлично работает в Firefox и Chrome, но я не знаю, почему мой код не работает в Safari и Opera... Версия Safari, которую я использую 5.1.7... и Opera версии 12.12... Ссылка...
1220 просмотров
schedule 12.02.2022

Анимация ключевого кадра CSS с преобразованием преобразования привязывается к целым пикселям в IE 10 и Firefox.
Похоже, что и IE 10, и Firefox привязывают элементы к целым пикселям при анимации их положения с помощью преобразования 2D-преобразования в анимации ключевого кадра css. Chrome и Safari этого не делают, что выглядит намного лучше при анимации...
19491 просмотров
schedule 19.03.2022

Css3 разные ключевые кадры для разных состояний
у меня проблемы с этим. Моя первая анимация работает нормально при загрузке страницы, но я хочу вызвать другую анимацию при наведении на элемент фигуры, если вы это сделаете, первая анимация повторяется, но видимо, если вы поместите мышь над красным...
115 просмотров
schedule 11.11.2022

CSS3 свойство animation-delay не работает
У меня есть этот код. <!DOCTYPE html> <html> <head> <title>Rollover Test</title> <style> #one { width: 50px; height: 50px; background: red; position: absolute;...
720 просмотров
schedule 04.03.2024

анимация текста для вращения по кругу
Я использовал lettering.js (который является инжектором интервалов) и преобразования css для сопоставления строки текста с краем круга. Моя небольшая цель прямо сейчас — анимировать этот текст с помощью ключевых кадров. И моя проблема в том, что...
1473 просмотров
schedule 04.05.2022

как обновить шрифты icomoon до существующих шрифтов icomoon?
обновление шрифтов до существующих шрифтов Я уже использую 5 шрифтов icomoon на нашем веб-сайте, которые были загружены с icomoon. Я хочу включить еще 2 шрифта. Что я должен делать? Могу ли я добавить новые 2 шрифта к существующим шрифтам?...
12771 просмотров
schedule 01.01.2023

Как запустить анимацию ключевого кадра CSS3 один раз и только при срабатывании?
Я хотел бы реализовать анимацию HTML5, которая включает в себя нечто большее, чем просто перемещение элемента из точки А в точку Б. Вот почему я рассматриваю возможность использования ключевых кадров, а не переходов. Однако я просто хочу, чтобы...
13172 просмотров

Как мне сделать так, чтобы число на моей странице быстро подсчитывалось от 0 до 60 при загрузке?
Я представляю элемент стиля быстрого счетчика пробега, похожий по стилю на вращающиеся числа на этом веб-сайте (прокрутите вниз немного), но с числами, вращающимися от нуля до 60 или, возможно, от 0 до 100, сбрасываемыми обратно на 0, а затем до...
1412 просмотров
schedule 07.04.2023

CSS3 анимация с градиентом + фоновое изображение
У меня есть div с фоном, который имеет как фоновое изображение, прозрачное png, так и линейный градиент. Желаемый эффект состоит в том, чтобы изображение анимировалось, а градиент оставался статичным. В Chrome и Safari анимация работает именно так,...
445 просмотров
schedule 18.03.2023

Дочерние переходы CSS3 не работают в FireFox
У меня есть элемент h1 и его дочерний элемент, анимированный с помощью переходов CSS3. Все хорошо работает в Chrome и даже в IE 10+, но в Firefox эффекты перехода видны только в родительском элементе, а не в дочернем. Код такой...
462 просмотров

Переключение анимации CSS3 по клику
Каков наилучший способ изменить направление анимации CSS3 при нажатии без javascript? В последнее время я изучал хаки с флажками и пытался найти способ иметь только один набор ключевых кадров вместо двух наборов для одного перехода вперед и одного...
8800 просмотров
schedule 02.10.2022

Анимация CSS3: неактивное, активное и дополнительное «конечное» состояние?
У меня есть кнопка с анимированным фоном при наведении. Он заполняется цветным фоном слева направо, однако в настоящее время при наведении мыши анимация меняется на противоположную; цвет сжимается обратно влево и исчезает. При выходе из мыши я...
495 просмотров
schedule 20.12.2022

Как использовать CSS \cubic-bezier для реализации функции синуса?
Я собираюсь реализовать анимацию ширины CSS в синусоидальной функции, например: Но с cubic-bezier я могу установить только четыре параметра, таких как transition: all 500ms cubic-bezier(0.695, 0.015, 1.000, 0.275); . Можно ли добиться...
522 просмотров
schedule 08.12.2022

css3: hover не будет работать после анимации
У меня есть DIV, который меняет bgcolor на синий при: hover. Щелчок кнопки добавляет класс, который анимирует bgcolor на зеленый. Но теперь :hover не будет работать (bgcolor не изменится на синий). Почему?...
2749 просмотров
schedule 28.10.2022