css3 :hover添加特效

为改变hover动画效果，可以为hover添加transition 增加过度效果

1、第一种写法（事件前有动画效果）：

<style>
        body{ padding: 100px}
        .demo{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .demo:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
    </style>
    <div class="demo"></div>

此效果可以改变鼠标移入目标区域上的hover效果，缺点：鼠标移出区域还原之前效果时，没有过度效果，很生硬；改善此效果参看方法二（如下）；

2、方法二（事件前后有动画效果）

<style>
        body{ padding: 100px}
        .demo{
            width: 100px;
            height: 100px;
            background-color: blue;
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
        .demo:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
        }
    </style>
    <div class="demo"></div>

将transition放在目标节点css中，即可在hover前后均有动画效果；
*transition还可以指定其他效果,并且可以同时指定多个效果，比如：transition : width 1s； opacity : 0.5s;