CSS3动画控制元素阶梯显示

首先看下需要实现的效果

实现这个效果简单总结分为以下几步：

1、将元素透明
2、增加动画
3、控制动画结束后的状态
4、控制动画执行时间

具体实现步骤如下：

1、将元素透明

opacity:0;

2、增加动画

定义动画：
@keyframes fadeIn{
  0%{opacity:0;}
  100%{opacity:1;}
}
@-webkit-keyframes fadeIn{
  0%{opacity:0;}
  100%{opacity:1;}
}
使用动画：
.fadeIn{
  animation:fadeIn 1s;
  -webkit-animation:fadeIn 1s;
}

3、控制动画结束后的状态

.animation{
  animation-fill-mode:both;
  -webkit-animation-fill-mode:both;
}

4、控制动画执行时间

$('ul>li').each(function(index,domEle){
  //动画开始时间
  var startTime='.'+(index*2)+'s';
  //为元素添加动画开始时间，并且增加样式
  $(domEle).css({'animation-delay':startTime,'-webkit-animation-delay':startTime});
});

完整代码列表

 
  
  
  
  
  
 

 
  

    
Java编程思想
    
JavaScript高级程序设计
    
Spring Boot从入门到精通
    
JQuery底层原理分析
    
更多>>