css3动画

1：定义

css3动画是使元素从一种样式自动变化为另一种样式的效果。在这个过程中你可以使用任意多的样式和任意多的次数。使用时用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，from代表0% 是动画的开始，to代表100% 是动画的完成。为了动画看起来具有连贯性，一般用百分比精确控制发生变化的时间点。

2：属性用法

　　Animation是一个简写属性，包含以下内容：

1、Animation-name 调用关键帧（必须存在）

2、Animation-duration 设置完成时间（必须存在）

3、Animation-timing-function 动画的速度曲线（默认是ease 动画以低速开始，然后加快，在结束前变慢）

4、Animation –delay 延迟（默认是0s）

5、Animation-iteration-count 动画应该播放的次数（默认是1次就结束，infinite是无限次数）

6、Animation-direction 规定动画的运动方向（默认正方向 reverse：反方向运行，alternate：动画先正常运行再反方向运行然后交替运行，alternate-reverse：动画先反运行再正方向运行，并持续交替运行。）

简写形式：

　　　　Animation: name duration timing-function delay iteration count direction 。

制作按钮抖动效果

利用transition 定制不同时间段的transform动画效果，达到按钮抖动动画

        .doudong{
    width:40px;
    height:40px;
    display:block;
    background:lightgreen;
    border-radius:50%;
    margin:5px;
    color:#fff;
    font-size:24px;
    text-align:center;
    line-height:40px;
    cursor:pointer;
    -webkit-transition:all 0.25s;
}
.doudong:hover{
    -webkit-animation:shake 0.25s;
    background: lightblue;
}
@-webkit-keyframes doudong{
    0%,10%,55%,90%,94%,98%,100%{
        -webkit-transform:scale(1,1);
    }
    30%{
        -webkit-transform:scale(1.14,0.86);
    }
    75%{
        -webkit-transform:scale(0.92,1.08);
    }
    92%{
        -webkit-transform:scale(1.04,0.96);
    }
    96%{
        -webkit-transform:scale(1.02,0.98);
    }
    99%{
        -webkit-transform:scale(1.01,0.99);
    }
}
   

	<span class="shake">弹</span>

鼠标TIPS文字提示效果

一个很常见的提示效果，当鼠标移动到某个标签上时，需要弹出一个简短的介绍文字。我们也可以使用transform，达到一种过度的动画效果


   .tips{
    width:234px;
    height:34px;
    border-radius:40px;
    position:absolute;
    top:400px;
    left:600px;
}
.tips a{
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    border:2px solid lightblue;
    position:absolute;
    left:0px;top:0px;
    background:red;
    color:#fff;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    z-index:2;
}
.tips a:hover + span{
    -webkit-transform:translateX(40px);
    opacity:1;
}
.tips span{
    display:inline-block;
    width:auto;
    padding:0 20px;
    height:30px;line-height:30px;
    background:red;
    border-radius:30px;
    text-align: center;
    color:#fff;
    position:absolute;
    top:2px;
    opacity:0;
    -webkit-transition:all 1s;
    -webkit-transform:translateX(80px);
}
   
<div class="tips">
    <a href="javascript:;">Hi</a>
    <span>hello</span>
</div>

利用CSS3完成炫酷的效果

css3动画

1：定义

2：属性用法

制作按钮抖动效果

鼠标TIPS文字提示效果