CSS3动画控制元素阶梯显示

首先看下需要实现的效果

CSS3动画控制元素阶梯显示_第1张图片

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

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});
});

完整代码列表


<html>
 <head>
  <title> CSS3动画控制元素阶梯显示 title>
  <meta charset="UTF-8"/>
  <script type="text/javascript" src="js/jquery.min.js">script>
  <script type="text/javascript">
    $(document).ready(function(){
        $('ul>li').each(function(index,domEle){
            //动画开始时间
            var startTime='.'+(index*2)+'s';
            //为元素添加动画开始时间
            $(domEle).css({'animation-delay':startTime,'-webkit-animation-delay':startTime});
        });
    });
  script>
  <style type="text/css">
    @keyframes fadeIn{
        0%{opacity:0;}
        100%{opacity:1;}
    }
    @-webkit-keyframes fadeIn{
        0%{opacity:0;}
        100%{opacity:1;}
    }
    *{
        margin:0px;
        padding:0px;
    }
    ul {
        list-style:none;
        margin-left:10px;
    }
    ul li{
        font:normal 15px/35px '微软雅黑';
        margin-top:10px;
        opacity:0;
        cursor:pointer;
    }
    .fadeIn{
        animation:fadeIn 1s;
        -webkit-animation:fadeIn 1s;
    }
    .animation{
        animation-fill-mode:both;
        -webkit-animation-fill-mode:both;
    }
    ul li span,a{
        background:#000;
        display:inner-block;
        padding:10px 20px 10px 10px;
        color:#fff;
    }
    ul li span:hover,a:hover{background:rgba(0,0,0,0.8)}
    a{text-decoration:none;}
    ul li:last-child:hover a{text-decoration:underline;}
  style>
 head>

 <body>
  <ul>
    <li class="animation fadeIn"><span>Java编程思想span>li>
    <li class="animation fadeIn"><span>JavaScript高级程序设计span>li>
    <li class="animation fadeIn"><span>Spring Boot从入门到精通span>li>
    <li class="animation fadeIn"><span>JQuery底层原理分析span>li>
    <li class="animation fadeIn"><a href='#'>更多>>a>li>
  ul>
 body>
html>

你可能感兴趣的:(CSS3动画控制元素阶梯显示)