一、CSS3 过渡

 1、transition

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

transition-property：检索或设置对象中的参与过渡的属性

transition-duration：检索或设置对象过渡的持续时间

transition-delay：检索或设置对象延迟过渡的时间

transition-timing-function：检索或设置对象中过渡的动画类型

2、贝塞尔曲线：

属性值：cubic-bezier()

贝塞尔曲线网址：http://cubic-bezier.com/

简写：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

最简写：transition:运动时间s/ms

案例：悬停div,让p标签沿着x方向发生位移

<style>
　　div{
　　　　width:500px;
　　　　height:500px;
　　　　background:pink;
　　}
　　p{
   　　 width:100px;
　　　　height:100px;
　　　　background:red;
　　　　transition:.2s
　　}
　　div:hover p{
    　　transform:translateX(400px);
　　}
　　</style>
　　<div>
    <p></p>
　　</div>
<style>

二、CSS3 帧动画

1、animation

帧动画是通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法：

第一步：先用@keyframes 制定运动动画的轨迹规则

@keyframes myMove{

from{初始状态属性}

to{结束状态属性}

}

或

@keyframes myMove{

0%{初始状态属性}

100%{结束状态属性}

}(中间再可以添加关键帧)

备注：mymove是给动画起的名字