#html #css #animation
Вопрос:
Вот демонстрационная CSS-анимация, которая создается, когда я нажимаю кнопку анимировать текст с помощью изменяющихся классов css.
Но она не меняется плавно…
ПРИМЕЧАНИЕ: когда я не добавляю text-shadow свойство, оно анимируется плавно, но когда я добавляю text-shadow свойство, оно запаздывает / не сглаживается.
ПРИМЕЧАНИЕ: и ДА, он плавно работает в браузере Firefox.
Почему?
хотя у меня включено аппаратное ускорение в браузере Chrome, и у меня новейший процессор AMD и новейшая видеокарта NVIDIA.
Что мне теперь делать ?
ВЕСЬ КОД:
$(document).ready(function(){ $(".animate").click(function(){ $(".r1").addClass("r2"); $(".r16").addClass("r15"); $(".r15").removeClass("r16"); $(".r2").removeClass("r1"); }); }); .r1 { width: 400px; height: 300px; background-color: red; font-size: 50px; text-align: center; margin-top: 60px; color: #fff; backface-visibility: hidden; perspective: 1000; } .r2 { background-color: red; animation-name: example; animation-duration: 0.7s; color: #fff; width: 400px; height: 100px; text-align: center; margin-left: 310px; font-size: 33px; backface-visibility: hidden; perspective: 1000; animation-timing-function: linear; } @keyframes example { 0% { width: 400px; height: 300px; margin-left: 0px; margin-top: 60px; font-size: 50px;} 100% { width: 400px; height: 100px; font-size: 33px; margin-left: 310px;} } .r15 { animation-name: r15; animation-duration: 0.7s; color: #fff; backface-visibility: hidden; perspective: 1000; animation-timing-function: linear; } @keyframes r15 { 0% { filter: brightness(401%); hue-rotate(88deg); text-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #e60073, 0 0 0px #e60073, 0 0 0px #e60073, 0 0 0px #e60073, 0 0 0px #e60073; invert(75%); blur(0px); color: black; transform: scale(1, 1);} 40% { filter: brightness(401%) hue-rotate(88deg); text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; invert(75%) blur(4px); color: black; transform: scale(0.4, 0.8);} 100% { filter: brightness(401%); hue-rotate(88deg); text-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #e60073, 0 0 0px #e60073, 0 0 0px #e60073, 0 0 0px #e60073, 0 0 0px #e60073; invert(75%); blur(0px); color: black; transform: scale(1, 1);} } lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"gt;lt;/scriptgt; lt;button class="animate"gt;Animate Textlt;/buttongt; lt;div class="r1"gt;lt;div class="r16"gt;SOME Text i want to animate it with text shadow effect but it laglt;/divgt; lt;/divgt; Комментарии:
1. В моем FF и Chrome это работает точно так же. Кстати, ваш эффект очень сложный, но не впечатляющий.