animate.css动画初始状态隐藏

html-css023

animate.css动画初始状态隐藏,第1张

在使用animate.css会做移动端的css动画，PC端的结合jquery.fullpage.js就能做一个全屏滚动的企业网站，但初始状态下需要隐藏有动画的元素

可以给animated类添加opacity:0属性 ，动画在开始状态是隐藏的，当动画元素出现在屏幕可视区域，动画会自动执行，执行完动画会保持最后一个状态不变，也就是不会隐藏，但使用是有前提的！！敲重点

在animate.css中能使用这种方法的动画类名只有和fadeIn相关的才能用 ，fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight都可以使用

像slideInUp这些slideIn相关的都不能使用

初始

div{opacity:0

    -webkit-animation-name: fadeIn

    animation-name: fadeIn

    -webkit-animation-duration: 1s  a

    nimation-duration: 1s  

    -webkit-animation-fill-mode: forwards   

    animation-fill-mode: forwards 

     -webkit-animation-delay:6s  /**延迟动画**/

     animation-delay:6s 

}

@-webkit-keyframes fadeIn {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}

@keyframes fadeIn {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}