我正在使用AnimationEnd来触发添加新类.它在Chrome中运行良好,但其他浏览器没有响应.我不知道为什么. JS script type="text/javascript" $(document).ready(function() { $('.background-image').on('webkitAnimationEnd
JS
<script type="text/javascript"> $(document).ready(function() { $('.background-image').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function() { $(this).addClass('visible'); }); }); </script>
CSS
@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .background-image { background: url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; -webkit-animation-name: fade-in; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 3s; -moz-animation-name: fade-in; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in; -moz-animation-iteration-count: 1; -moz-animation-delay: 3s; } .background-image.visible { opacity: 1; }看起来它正在绊倒mozAnimationEnd.试试这个,我在Firefox中测试过:
jsFiddle
$(document).ready(function() { $('.background-image').on('animationend webkitAnimationEnd oAnimationEnd', function() { $(this).addClass('visible'); }); });