CSS3也可以实现动画效果

transform 该属性允许我们对元素进行旋转、缩放、移动。

1、移动

transform: translate(100px, 0px);

          第一个参数:水平方向 第二个参数:垂直方向

2、scale  缩放

 

transform: scale(0.5, 0.5)

          默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大

3.rotate  旋转

transform: rotate(45deg)；

       旋转rotate()通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转

4. 倾斜

         作用:改变元素在页面中的形状 2、语法 属性：transform 函数： 1、skew(xdeg) 向横向倾斜指定度数 x取值为正，X轴不动，y轴逆时针倾斜一定角度 x取值为负，X轴不动，y轴顺时针倾斜一定角度 skew(30deg) 2、skew(xdeg,ydeg) ydeg : 纵向倾斜度数 y取值为正，y轴不动,x轴顺时针倾斜一定角度 y取值为负，y轴不动,x轴逆时针倾斜一定角度 3、skewX(xdeg)4、skewY(ydeg)

5.transform-origin

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用； 第一个参数:水平方向 第二个参数:垂直方向 注意点 取值有三种形式

1.具体像素 transform-origin: 200px 0px;

2. 百分比 transform-origin: 50% 50%; 

3.特殊关键字 transform-origin: center center; transform-origin: left top;

6、景深

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现 ，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。（没有perspective，便“没有”Z轴）  

呈现近大远小的效果

    1、作为属性，给父元素设置，作用于所以子元素

    2、作为transform的一个值，作用于元素本身

perspective: 1200px;/*(加在父元素上)*/
transform:perspective(1200px); /*（在子元素中使用）*/

 两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间

二、动画

    CSS3属性中有关于制作动画的三个属性： transform,transition,animation

@keyframes mymove{
 from{初始状态属性}
    to{结束状态属性}
}
/*或*/
@keyframes mymove{
 0%{初始状态属性}
100%{结束状态属性}        /*中间再可以添加关键帧*/
}

目前浏览器都不支持@keyframes 的规则

Firefox 使用 @-moz-keyframes

Opera 使用 @-o-keyframes

Safari 于Chrome 使用 @-webkit-keyframes

动画的三要素：

1.告诉系统需要执行那个动画 animation-name:动画名

2.告诉系统我们需要创建一个名称叫什么的动画

@keyframes myname{
     from{初始状态属性}
    to{结束状态属性}
}

3.告诉系统动画持续的时长

div{
    animation-duration:3s; 
}

animation与transition的区别

相同点：都是随着时间改变元素的属性值。

不同点： transition需要触发一个事件( hover 事件或 click 事件等)才会随时间改变其 css 属性； 而 animation 在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素 css 的属性值，从而达到一种动画的效果，css3 的 animation 就需要明确的动画属性值。

三 animation 复合用法

1.animation-name 检索或设置对象所应用的动画名称

      说明：必须与规则 @keyframes 配合使用， @keyframes mymove{} animation-name:mymove;

2.animation-duration 检索或设置对象动画的持续时间

       说明：animation-duration:3s; 动画完成使用的时间为3s

1. animation-timing-function 检索或设置对象动画的过渡类型

           说明： linear：线性过渡。 ease：平滑过渡。 ease-in：由慢到快。 ease-out：由快到慢。 ease-in-out：由慢到快再  到慢。 step-start:马上跳到动画每一结束桢的状态

1. animation-delay 检索或设置对象动画延迟的时间

   说明：animation-delay:0.5s; 动画开始前延迟的时间为 0.5s

2. animation-iteration-count 检索或设置对象动画的循环次数

   说明： animation-iteration-count: infinite | number;      infinite：无限循环    number: 循环的次数

3. animation-direction 检索或设置对象动画在循环中是否反向运动 说明： normal：正常方向    reverse：反方向运行alternate：动画先正常运行再反方向运行，并持续交替运行 alternate-reverse：动画先反运行再正方向运行，并持续交替运行

4. animation-play-state 检索或设置对象动画的状态 说明： animation-play-state:running | paused; running:运动paused: 暂停 animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行