問題描述

正常狀態

動畫狀態

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

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; }}

問題解答

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