发新话题
打印

利用css3实现动画效果

利用css3实现动画效果

代码:
@keyframes fadeIn {  
        0% {opacity: 0;}/*初始状态 透明度为0*/  
        40% {opacity: 0;}/*过渡状态 透明度为0*/  
        100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fadeIn {/*针对webkit内核*/  
        0% {opacity: 0;}  
        40% {opacity: 0;}  
        100% {opacity: 1;}  
}  
.fadeIn {
        animation: fadeIn;/*动画名称*/  
        animation-duration: 1.5s;/*动画持续时间*/  
        -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
}
在需要加入动画的元素中加上fadeIn类名即可,时间控制可以使用setTimeOut()控制。


如果是淡出效果,需要在css样式中,设置默认透明度为0,防止动画结束后,恢复初始样式时,元素仍然显示在画面上。
代码:
@keyframes fadeOut {  
        0% {opacity: 1;}/*初始状态 透明度为0*/  
        60% {opacity: 1;}/*过渡状态 透明度为0*/  
        100% {opacity: 0;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fadeOut {/*针对webkit内核*/  
        0% {opacity: 1;}  
        60% {opacity: 1;}  
        100% {opacity: 0;}  
}  
.fadeOut {
        opacity: 0; /*设置默认状态,防止动画结束后,元素重新显示在画面上*/
        animation: fadeOut;/*动画名称*/  
        animation-duration: 1.5s;/*动画持续时间*/  
        -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
}

TOP

发新话题