Анимация CSS по умолчанию медленно исчезает, есть ли способ изменить это?
Новое в использовании анимации CSS. Создал анимацию из 8 картинок общей продолжительностью 100 секунд. Используя проценты ключевых кадров, у меня есть первые 6 кадров 10 секунд, 7-й кадр 30 секунд, последний кадр 10 секунд, указывающих изображения с использованием URL-адреса фонового изображения. При реализации изображения появляются и исчезают очень медленно, едва достигая этого за 10 секунд времени кадра. Веб-сайт W3schools, на котором я изучаю это, не дает возможности ускорить затухание или указать другой тип перехода между слайдами. Я не нахожу ответов на этот вопрос больше нигде в Интернете. Я что-то упускаю? См. код ниже:
.homeslider {
width: 950px;
height: 400px;
padding-left: 25px;
animation-name: homepics;
animation-duration: 100s;
}
@keyframes homepics {
0% { background-image: url('images/pic1.png'); }
10% { background-image: url('images/pic2.png'); }
20% { background-image: url('images/pic3.png'); }
30% { background-image: url('images/pic4.png'); }
40% { background-image: url('images/pic5.png'); }
50% { background-image: url('images/pic6.png'); }
80% { background-image: url('images/pic7.png'); }
90% { background-image: url('images/pic8.png'); }
}
<div class = "homeslider"></div>
Вы находитесь рядом. Возможно, я бы не хотел перехода, но небольшой плавный переход тоже сработал бы. Последнее Александр дал мне ниже, но переход не плавный. Пытался сделать это, не загружая чужой код слайдера JQuery. Если это единственное решение, думаю, я пойду по этому пути. Все еще надеюсь, что есть встроенный в CSS способ сделать это.
Ответы 2
Чтобы проиллюстрировать вашу проблему на сайте, я создал фрагмент, используя фоновые цвета вместо изображений:
.homeslider {
width: 950px;
height: 400px;
padding-left: 25px;
animation-name: homepics;
animation-duration: 100s;
}
@keyframes homepics {
0% { background-color: red; }
10% { background-color: orange; }
20% { background-color: yellow; }
30% { background-color: green; }
40% { background-color: blue; }
50% { background-color: indigo; }
80% { background-color: violet; }
90% { background-color: purple; }
}<div class = "homeslider"></div>В приведенном ниже примере я думаю, что решил вашу проблему, добавив дополнительные ключевые кадры прямо перед порогом следующего изменения, чтобы переход не происходил до последнего возможного момента:
.homeslider {
width: 950px;
height: 400px;
padding-left: 25px;
animation-name: homepics;
animation-duration: 100s;
}
@keyframes homepics {
0% { background-color: red; }
9% { background-color: red; }
10% { background-color: orange; }
19% { background-color: orange; }
20% { background-color: yellow; }
29% { background-color: yellow; }
30% { background-color: green; }
39% { background-color: green; }
40% { background-color: blue; }
49% { background-color: blue; }
50% { background-color: indigo; }
79% { background-color: indigo; }
80% { background-color: violet; }
89% { background-color: violet; }
90% { background-color: purple; }
99% { background-color: purple; }
}<div class = "homeslider"></div>Спасибо, Александр. Применяя это к моим изображениям, это действительно ускоряет переход затухания. Перед началом перехода возникает быстрая вспышка, что нежелательно. Без сомнения, результат компрометации медленного угасания. Значит, в анимации действительно нет CSS-свойства, которое позволяло бы правильно медленное затухание? И последний вопрос. Последний кадр хотелось бы оставить на неопределенный срок. Я не вижу для этого другого выхода, кроме как увеличить продолжительность до огромного числа и сделать проценты ключевых кадров бесконечно малыми. Какой-нибудь совет, чтобы поделиться там? Я очень ценю вашу помощь!
Исследуйте режим анимации-заполнения.
Увлекательный момент перехода - к сожалению, без минимальный воспроизводимый пример мне будет сложно его воссоздать. Вы проверили, происходит ли это во всех браузерах? Возможно, стоит открыть отдельный вопрос (или поискать, не решил ли уже кто-то эту проблему). Что касается предотвращения зацикливания, @AHaworth прав - animation-fill-mode, вероятно, будет вашим решением; конкретно animation-fill-mode: forwards;. Удачи и удачного кодирования!
(Кроме того, не забудьте выбрать ответ, который лучше всего решил вашу проблему, с помощью галочки на экране. Вы можете сделать это сейчас или подождать, пока кто-нибудь еще не придет и не предложит решение, которое лучше подходит для вашей проблемы.)
Режим анимации-заполнения: вперед не делает то, что рекламирует. Последний кадр по-прежнему исчезает после завершения анимации. Вспышка перехода анимации и режим заполнения не работают, возможно, это связано с тем, что я загрузил animation.css из Интернета и использовал его для перемещения элементов на домашнюю страницу веб-сайта справа. Я изучу это, но я благодарю вас обоих за вашу помощь. Я подожду еще немного, чтобы увидеть, есть ли у кого-то другое решение без вспышки, если нет, я отдам вам должное здесь. Спасибо еще раз.
Я загрузил указанную страницу веб-сайта. Это веб-сайт, который я разрабатываю для своего 50-летия воссоединения HS :) Проверьте alterclassof75.org/index2.html. На начальной странице index.html используется анимация, которую я создал в Photoshop, но когда она была преобразована в анимированный .GIF, все непрозрачные фоны были преобразованы в белые, поэтому я решил попробовать анимацию CSS.
@Alan-Seattle - Поздравляем с предстоящим 50-летием воссоединения! Похоже, что вы не первый, кто столкнулся с проблемой мерцания при анимации background-image с помощью CSS.. Преобладающая теория в этом посте заключается в том, что мерцание возникает из-за того, что изображение загружается по сети (или, возможно, извлекается из кеша); предоставляются некоторые средства правовой защиты, которые вы можете попробовать. Что касается проблемы animation-fill-mode, проверьте предыдущую ссылку на MDN — там все работает, возможно, вы увидите, как ваш код отличается от отладки. Удачи и удачного кодирования!
background-image является анимируемым свойством, поэтому изображения появляются и исчезают на протяжении всей последовательности — изображение ни в коем случае не «остается неподвижным» с полной непрозрачностью.
В этом фрагменте используется довольно упрощенный подход к минимизации времени перехода между фоновыми изображениями — отображение изображения почти на 10% в случае первых нескольких, а затем очень быстрый переход к следующему изображению.
У этого метода есть недостатки: система не ожидает добавления фоновых изображений до тех пор, пока они не потребуются, поэтому в первый раз может быть довольно яркий пробел, когда загружается следующее изображение. [«Исправление» однократного запуска анимации, возможно, вне поля зрения, очень быстро для загрузки изображений заранее было удалено, поскольку это казалось не тем, что нужно].
.homeslider {
width: 950px;
height: 400px;
padding-left: 25px;
animation-name: homepics;
animation-duration: 100s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
@keyframes homepics {
0%,
9.9999% {
background-image: url(https://picsum.photos/id/1015/200/300);
}
10%,
19.9999% {
background-image: url(https://picsum.photos/id/1016/200/300);
}
20%,
29.9999% {
background-image: url(https://picsum.photos/id/1018/200/300);
}
30%,
39.9999% {
background-image: url(https://picsum.photos/id/1019/200/300);
}
40%,
49.9999% {
background-image: url(https://picsum.photos/id/1020/200/300);
}
50%,
79.999% {
background-image: url(https://picsum.photos/id/1021/200/300);
}
80%,
89.999% {
background-image: url(https://picsum.photos/id/1022/200/300);
}
90%,
100% {
background-image: url(https://picsum.photos/id/1023/200/300);
}
}<div class = "homeslider"></div>Есть много других способов имитации слайдера изображений с использованием чистого HTML/CSS — например, когда все изображения располагаются друг над другом и «перемещаются» с помощью z-index или играются с непрозрачностью.
Продолжительность 0,5 была действительно странной и не нужной. Не знал, что процент может быть так точно указан, что исправит вспышку. Спецификация фона не имела ничего общего с моим сообщением и уничтожила мой эффект непрозрачного фона на подписях. Не знаю, для чего это было. Режим анимации-заполнения: вперед по-прежнему не работает, а бесконечная спецификация заставляет все повторяться, в отличие от того, что остается последний слайд.
Спасибо за разъяснения. Я не знал, что это не для бесконечной прокрутки, фон был там только для теста и, очевидно, может быть удален, «расширенная загрузка», конечно, может быть просто удалена, если вы не испытываете затруднений со временем изображения загрузка. Поэтому я сделал соответствующие правки.
Не могли бы вы уточнить, что именно вы хотите, чтобы произошло? Звучит так, как будто вы хотите, чтобы изображение появлялось на секунду или две, затем было полностью видимым в течение секунды или двух, а затем исчезало — и по мере того, как оно исчезало, начинало появляться следующее. Правильно?