如何在元素可见之前延迟css动画？

Question

我有这个动画让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动画？