CSS3 新增 动画模块_过渡 动画 往返动画

过渡移动

div{

   width: 100px; height: 50px;

   background-color: red;

   transition-property: margin-left;

   transition-duration: 3s;  }

div:hover{ margin-left: 500px; }  

 动画

        div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*transition-property: margin-left;*/
            /*transition-duration: 3s;*/

            /*1.告诉系统需要执行哪个动画，lnj阔以随意命名，和下面保持一致即可*/
            animation-name: lnj;
            /*3.告诉系统动画持续的时长*/
            animation-duration: 3s;
        }
        /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
        @keyframes lnj {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

        /*div:hover{*/
            /*margin-left: 500px;*/
        /*}*/
    

效果展示：

1.过渡和动画之间的异同
    1.1不同点
          过渡必须人为的触发才会执行动画
          动画不需要人为的触发就可以执行动画

  1.2相同点
           过渡和动画都是用来给元素添加动画的
           过渡和动画都是系统新增的一些属性
           过渡和动画都需要满足三要素才会有动画效果

限制次数往返动画

 


        div {
            width: 100px;
            height: 50px;
            background-color: red;
            animation-name: sport;
            animation-duration: 2s;
            /*告诉系统多少秒之后开始执行动画*/
            /*animation-delay: 2s;*/
            /*告诉系统动画执行的速度*/
            animation-timing-function: linear;
            /*告诉系统动画需要执行几次*/
            animation-iteration-count: 3;
            /*告诉系统是否需要执行往返动画
            取值:
            normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
            alternate, 往返动画, 执行完一次之后往回执行下一次
            */
            animation-direction: alternate;
        }
        @keyframes sport {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
        div:hover{
            /*
            告诉系统当前动画是否需要暂停
            取值:
            running: 执行动画
            paused: 暂停动画
            */
            animation-play-state: paused;
        }

效果展示（中间暂停部分为鼠标悬停导致暂停）：

两个动画模块