一、transform
css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性
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,%等等。
二、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:
3）触发器：常用的触发器是几个伪类，:active,:target,:focus，也可以是前后两个类的改变。
三、animation
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。
transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发。
创建动画有两个步骤：
1.定义动画：主要指定义关键帧
@keyframes fadeIn{
from{
opacity:;
},
to{
opacity:;
}
}
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:告诉浏览器将元素的格式保持为动画结束时候的样子。
