您的位置:首页技术文章
文章详情页

css3 - safari页面的一出设置了css动画,影响页面其他地方文字的font-weight

浏览:56日期: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