码迷,mamicode.com
首页 > Web开发 > 详细

css过渡和动画

时间:2016-09-11 12:56:53      阅读:430      评论:0      收藏:0      [点我收藏+]

标签:

一、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过渡和动画

标签:

原文地址:http://www.cnblogs.com/xingxing88/p/5861320.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!