首页 > 代码库 > css过渡和动画

css过渡和动画

一、transition(过渡):

  1.规定使用属性的名称;

  2.规定时长;

  3.配合hover的使用。

    div{

       width:100px;

       height:50px;

       background:red;

       transition:width 5s linear 2s;

        }

     div:hover{

        width:1200px;

        height:200px;

        

            }

二、动画(animation):

  @keyframe规则用于创建动画。(必须要在代码前面加入浏览器前缀,实现兼容性)

  1.绑定选择器;

  2.动画名称;

  3.动画时长。

    div{

       width:100px;

        height:50px;

        background:red;

        border:1px soild black;

        position:relative;

          animation:myfirst 5s linear 2s infinite;

          }

      @keyframe myfirst{

        0% {backgroud:black; left:0px; top:0px;}

        25%{background:yellow;left:200px;top:0px;}

        50%{background:green;left:200px;top:200px;}

        75%{background:bule;left:0px;top:200px;}

        100%{background:red;left:0px;top:0px;}

                  }

css过渡和动画