css实现文字淡入淡出

最新推荐文章于 2024-08-23 14:38:37 发布

Tomorrow YE

最新推荐文章于 2024-08-23 14:38:37 发布

阅读量1.3w

点赞数

分类专栏： HTML5前端

本文链接：https://blog.csdn.net/qq_29301417/article/details/76013472

版权

HTML5前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

.first-words{ //针对每秒写样式
    opacity: 0;      /*实先规定文字的状态是不显示的*/
    animation: fade-in 4s ease 0s 1;    /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
    -webkit-animation: fade-in 4s ease 0s 1;
    -moz-animation: fade-in 4s ease 0s 1;
    -o-animation: fade-in 4s ease 0s 1;
    -ms-animation: fade-in 4s ease 0s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.second-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 2s 1;
    -webkit-animation: fade-in 4s ease 2s 1;
    -moz-animation: fade-in 4s ease 2s 1;
    -o-animation: fade-in 4s ease 2s 1;
    -ms-animation: fade-in 4s ease 2s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.third-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 4s 1;
    -webkit-animation: fade-in 4s ease 4s 1;
    -moz-animation: fade-in 4s ease 4s 1;
    -o-animation: fade-in 4s ease 4s 1;
    -ms-animation: fade-in 4s ease 4s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}