第六天CSS之自定义动画(animation)

元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style type="text/css">
    .box{
        width:100px;
        height: 100px;
        background: #5cBE3E;
        /*定义动画的名称*/
        animation-name:fromLeftToRight;
        /*定义动画时间*/
        animation-duration:3s;
        /*定义动画的过渡速度*/
        animation-timing-function : ease-in;
        /*定义动画的延时时间*/
         animation-delay : 1s;
/*定义动画的顺序  normal：正常方向reverse：反方向运行alternate：动画先正常运行再反方向运行，并持续交替运行alternate-reverse：动画先反运行再正方向运行并持续交替运行 */
        animation-direction : alternate;
        /*定义动画的执行次数  infinite表示无数次，其他可以写数字表示多少次*/
        animation-iteration-count:infinite;
    }
/*     定义动画   关键帧*/
    @keyframes fromLeftToRight{
        from{
            margin-left: 0;
        }
        to{
            margin-left: 100px;
        }
    }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

上课内容中这个导航下拉隐藏很好用，在网页中很实用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>daohang</title>
    <style type="text/css">
    .d1{
        width: 100px;
        height: 40px;
        line-height:40px;
        text-align: center; 
        background:green;
        border-radius: 10px;
        overflow: hidden;/* 超出隐藏 */

    }    
    .d1:hover{
        /*  定义动画名字 */
        animation-name:slidedown;
        /* 动画时间 */
        animation-duration:1s;
        /* 动画的过渡速度 */
        animation-time-function:ease-in-out;
        /*设置动画结束时的状态*/
        animation-fill-mode:forwards;
        /* 动画执行的次数 */
        animation-iteration-count:1;
        /* 动画开始执行的延迟时间 */
        animation-delay:.3s;

    }
    .d1 a{
        font-size: 18px;
        color: white;
        font-family: "微软雅黑";
        text-decoration: none;
    }
    .d1 ul{
        background-color: #313a28;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    @keyframes slidedown{
        from{
            height: 40px;
        }
        to{
            height: 230px;
        }
    }
    </style>
</head>
<body>
    <div class="d1">
        <a href="">导航</a>
        <ul>
            <li><a href="">新闻</a></li>
            <li><a href="">娱乐</a></li>
            <li><a href="">电影</a></li>
            <li><a href="">音乐</a></li>
        </ul>
    </div>
</body>
</html>

 

/*定义动画的状态   running：运动    paused：暂停 */

.box:hover{

           animation-play-state:paused;

      }

 

animation(动画复合属性)

div{

    -webkit-animation: FromLeftToRight  2s ease-out forwards;

                 animation: FromLeftToRight  2s ease-out forwards;  

}

posted @ 2016-08-16 00:39  蔚201388  阅读(677)  评论(0)  编辑  收藏  举报