css随笔6

　　　　　　　　　　　　过渡动画
1. transition-property(过渡属性)：
　　PS：all表示所有属性
2. transition-duration(过渡所需时间，俗称持续时间)：
　　transition-duration: .5s;
3. transition-timing-function(动画--过渡函数) :
　　transition-timing-function:ease-in;
4. transition-delay(动画--过渡延迟时间)：
　　transition-delay:.1s;
5. transition(过渡)：
　　transition: all .5s ease-in .1s;

　　　　　　　　　　自定义动画
1. animation-name(动画名称)：
　　animation-name : FromLeftToRight;
　　PS：必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
2. keyframes (关键帧)：
　　@keyframes FromLeftToRight{
　　　　　　　　　　　　　　　　　　from {left: 0; }
　　　　　　　　　　　　　　　　　　to {left: 800px; }
　　　　　　　　　　　　　　　　　}
3. animation-duration(动画时间)：
　　animation-duration:1s
4. animation-timing-function(动画的过渡速度)：
　　animation-timing-function : ease-in;
5. animation-delay(动画延迟时间)：
　　　　animation-delay : ease-in;
　　PS：ease：默认，逐慢
　　　　linear：匀速
　　　　ease-in：加速
　　　　ease-out：减速
　　　　ease-in-out：先加后减

6. animation-iteration-count(动画执行次数)：
　　　　animation-iteration-count : 2;
　　PS：当值为infinite时，为无限次
7. animation-direction(动画的顺序)：
　　　　animation-direction : reverse;
　　PS：normal：正常方向
　　　　reverse：反方向运行
　　　　alternate：动画先正常运行再反方向运行，并持续交替运行
　　　　alternate-reverse：动画先反运行再正方向运行，并持续交替运行
8. animation-play-state(动画的状态)：
　　　　animation-play-state:paused;
　　PS：running：运动
　　　　paused:暂停
9. animation-fill-mode(动画时间之外的状态)：
　　　　animation-fill-mode : forward;
　　PS：none：默认值。不设置对象动画之外的状态
　　　　forwards：设置对象状态为动画结束时的状态
　　　　backwards：设置对象状态为动画开始时的状态
　　　　both：设置对象状态为动画结束或开始的状态
10. animation(动画复合属性)
　　语法： animation：[ animation-name ] || [ animation-duration ] ||
　　　　　[ animation-timing-function ] || [ animation-delay ] ||
　　　　   [animation-iteration-count ] || [ animation-direction ] ||
　　　　　　<single-animation-fill-mode> ||
　　　　　　<single-animation-play-state> [ ,*]
　　例子： div{
　　　　　　　　animation: FromLeftToRight 2s ease-out forwards;
　　　　　　　　animation: FromLeftToRight 2s ease-out forwards;
　　　　　　　}
PS：如有多个，那就用逗号隔开。

 

HTML：
<div class="box">滚滚滚滚</div>

<div class="box1 normal">正常</div>
<div class="box1 reverse">反方向</div>
<div class="box1 alternate">先正后反，并持续交替</div>
<div class="box1 alternate-reverse">先反后正，并持续交替</div>


CSS：
.box{
    width:100px;
    height:100px;
    background:red;
    animation-name:fromlefttoright;/*定义动画的名称*/
    animation-duration:5s;/*完成动画的时间*/
    animation-timing-function:ease-out;/*速度*/
    animation-delay:2s;/*延迟*/
    animation-iteration-count:infinite;/*次数，infinite表示无限次*/
}

/*定义动画*/
@keyframes fromlefttoright{
    from{
        margin:0;
    }/*开始*/
    to{
        margin-left:1250px;
        transform:rotate(720deg);
    }/*结束*/
}



.box1{
    width:100px;
    height:100px;
    background:green;
    margin-top:10px;
    animation-name:lefttoright;
    animation-duration:5s;
    animation-iteration-count:infinite;
}
.box1:hover{
    animation-play-state:paused;/*动画的状态，paused表示暂停；running表示运动*/
}
.normal{
    animation-direction:normal;/*正常，默认的*/
}
.reverse{
    animation-direction:reverse;/*反向*/
}
.alternate{
    animation-direction:alternate;/*先正后反，并持续交替*/
}
.alternate-reverse{
    animation-direction:alternate-reverse;/*先反后正，并持续交替*/
}
@keyframes lefttoright{
    from{
        margin-left:0;
    }
    to{
        margin-left:500px;
    }
}

 

 

还可以做到隐藏效果：

HTML：
 <div class="dropmenu">
            <a href="">导航</a>
            <ul>
                <li><a href="">AAA</a></li>
                <li><a href="">AAA</a></li>
                <li><a href="">AAA</a></li>
                <li><a href="">AAA</a></li>
            </ul>
 </div>


CSS：
.dropmenu {
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #5CBE3E;
                border-radius: 5px;
                overflow: hidden;
}
            
.dropmenu:hover {
                animation-name: slideDown;
                animation-duration: 1s;
                animation-timing-function: ease-in-out;
                animation-delay: 1s;
}
            
.dropmenu a {
                font-family: "微软雅黑";
                color: #fff;
                text-decoration: none;
}
.dropmenu ul {
                padding: 0;
                margin: 0;
}
.dropmenu li {
                background: #808080;
                list-style: none;
}
            
@keyframes slideDown {
     from{
             height: 30px;
        }
       to {
                  height: 153px;
           }
}