您的位置:首頁技術文章
文章詳情頁

css3 - safari頁面的一出設置了css動畫,影響頁面其他地方文字的font-weight

瀏覽:91日期:2023-07-24 16:59:59

問題描述

正常狀態css3 - safari頁面的一出設置了css動畫,影響頁面其他地方文字的font-weight

動畫狀態css3 - safari頁面的一出設置了css動畫,影響頁面其他地方文字的font-weight

最后動畫執行完又變回正常狀態

animation-duration: 3s; animation-name:listAnimation; animation-fill-mode: both; -webkit-animation-duration: 3s; -webkit-animation-name:listAnimation; -webkit-animation-fill-mode: both; -moz-animation-duration: 3s; -moz-animation-name:listAnimation; -moz-animation-fill-mode: both; -o-animation-duration: 3s;-o-animation-name:listAnimation;-o-animation-fill-mode: both; animation-fill-mode: both;

@-webkit-keyframes listAnimation { 0% {-webkit-transform: perspective(400px) rotateY(90deg);-moz-transform: perspective(400px) rotateY(90deg);-o-transform: perspective(400px) rotateY(90deg);transform: perspective(400px) rotateY(90deg);filter:alpha(opacity=0);-moz-opacity:0;opacity:0; } 40% {-webkit-transform: perspective(400px) rotateY(-10deg);-moz-transform: perspective(400px) rotateY(-10deg);-o-transform: perspective(400px) rotateY(-10deg);transform: perspective(400px) rotateY(-10deg) } 70% {-webkit-transform: perspective(400px) rotateY(10deg);-o-transform: perspective(400px) rotateY(10deg);-moz-transform: perspective(400px) rotateY(10deg);transform: perspective(400px) rotateY(10deg) } 100% {-webkit-transform: perspective(400px) rotateY(0deg);-moz-transform: perspective(400px) rotateY(0deg);-o-transform: perspective(400px) rotateY(0deg);transform: perspective(400px) rotateY(0deg);filter:alpha(opacity=100);-moz-opacity:1;opacity:1; }}

問題解答

回答1:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties試過強制在keyframe里指定font-weight嗎?

標簽: CSS
国产综合久久一区二区三区