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吗?
