css3的新特性transform,transition,animation

一、transform

css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。

transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，如果将一个元素旋转45度，它实际上是重叠在元素的上方，下方或者旁边。而不会移动其周围的内容。

旋转：transform:rotate(-45deg);

缩放：transform:scale(.5);scaleX(2);scaleY(3)。如果给了负值，能够达到翻转的效果：scaleX(-1)

移动：transform:translate(1px,2px).使用其他单位：em,%也是可以的。

倾斜：transform:skew(45deg,0);

当然，以上多个tranform的属性可以结合使用；

transform-origin:一般来说，当对一个元素使用transform时，web浏览器就会以元素的中心点作为变黄点。该属性可以指定变换点，可以提供关键字，以pixel为单位的绝对值，以及em,%等等。

3D 转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

transform-style: flat|preserve-3d; 表示所有子元素在3D空间中呈现。

perspective: number|none; 设置元素的景深。

如：perspective: 500;

二、transition

transition可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程。

为了使transition生效，需要做这么几件事：

2）两个样式：一个是最初的样式，一个是最终的样式，transition可以实现这两种演示见的转换过程。

2）transition属性:

transition使用4个属性控制：

要以动画展示哪些属性（transition-property）:可以使用all关键字

动画过程有多久(transition--duration),

控制动画速度变化（transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等），

动画是否延迟执行（transition-delay）等

可以使用快捷方法来定义上述属性：

.navButton{
  color:black;
  background-color:#fff;
  transition:color,background-color;
  transition-delay:1s, .5s;
}

.navButton:hover{
   color:red;
   background-color:#ccc;  
}

 一般来说，将transition属性应用到最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式，再返回最初样式的变化过程。
不过，在使用css下拉菜单的时候，有一个技巧，为了防止鼠标离开菜单的时候，菜单很快消失，可以利用transition-delay让元素很快显示，但是慢慢消失，做法是，在初始样式中添加如下代码：

transition-dealy:.5s

 在：hover中不要添加延迟：

transition-delay:0

 3）触发器：常用的触发器是几个伪类，:active,:target,:focus，也可以是前后两个类的改变。

CSS3 过渡属性

属性	描述
transition	简写属性，设置以下四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

三、animation

transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。

transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发。

动画应用的两个步骤：

1.定义动画：主要指定义关键帧

@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}

 2.将动画应用到元素上

可以使用一下css属性定义动画：

.nav-button{
  animation-name:fadeIn;
  animation-duration:1s;
  animation-timing-function:ease-out,
  animation-delay:.5s;
  animation-iteration-count:infinite;  
  animation-direction:alternate
} 

animation-name:和当初定义的动画名称相对应；

animation-duration：动画执行一次持续的时长；

animation-timing-function：动画速率变化函数；

animation-delay：动画延迟执行的时间长度；

animation-iteration-count：动画执行的次数，可以是数字，或者关键字：infinate(无限运行)；

animation-direction:alternate;alternate(奇数次超前运行，偶数次后退运行)，如希望动画从黄色到蓝色，并且再重复一次，使用alternate关键字就能够防止从蓝色突变为黄色 animation-fill-mode:告诉浏览器将元素的格式保持为动画结束时候的样子。