CSS Note 2.3 animation

一、CSS

@charset "UTF-8";
div{
    margin: 10px;
    padding: 10px;
    width: 160px;
    height: 80px;
    background: chartreuse ;

}

@keyframes my {
    from {
        margin-left:50px ;
        background-color: green;
    }
    to{
        margin-left:300px ;
        background-color: blue;
    }
}
@keyframes you {
    0% {
        margin-left:50px ;
        background-color: yellow;
    }
    100%{
        margin-left:300px ;
        background-color: blue;
    }
}
#div5{
    animation-name:my ;
    animation-duration: 3s;/*动画持续时间*/
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 2;/*infinite不限次数*/
    animation-fill-mode: forwards;/*动画完成时停留在最后一帧，backwards在第一帧时应用,延时时停留在第一帧处,both是两种都应用*/
}
#div6{
    animation-name:you ;
    animation-duration: 3s;/*动画持续时间*/
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: 2;/*infinite不限次数*/
    animation-direction:alternate ;/*轮流反向播放，默认值是normal*/
    animation-play-state: running;/*结合js使用可以定义动画暂停或者播放*/
    animation-fill-mode: both;
   /* 复合属性语法animation: name duration timing-function delay iteration-count direction;*/
}

二、效果展示