如何延迟css动画直到元素可见？

我有一个让h1和p飞入的动画：

@-moz-keyframes titledrop {
                0% {
                    -moz-transform: translateY(-80px);
                }
                100% {
                    -moz-transform: translateY(0);
                }
            }
            @-webkit-keyframes titledrop {
                0% {
                    -webkit-transform: translateY(-80px);
                }
                100% {
                    -webkit-transform: translateY(0);
                }
            }
            @keyframes titledrop {
                0% {
                    transform: translateY(-80px);
                }
                100% {
                    transform: translateY(0);
                }
            }
            @-moz-keyframes drop2 {
                0% {
                    -moz-transform: translateY(-80px);
                }
                100% {
                    -moz-transform: translateY(0);
                }
            }
            @-webkit-keyframes drop2 {
                0% {
                    -webkit-transform: translateY(-80px);
                }
                100% {
                    -webkit-transform: translateY(0);
                }
            }
            @keyframes drop2 {
                0% {
                    transform: translateY(-80px);
                }
                100% {
                    transform: translateY(0);
                }
            }

---

但有时动画在元素可见之前开始，因此看起来好像什么都没有发生。我如何延迟css动画直到元素可见？

您是说您的元素具有已删除的可见性：隐藏集？或者你的意思是延迟CSS动画直到页面加载？你说的可见是什么意思？你的意思是一旦元素进入视口即滚动？我的意思是当页面已加载且元素可见时。使用JavaScript侦听doc ready或onload事件，然后应用一个类来启动动画。