css3动画

css3动画的3个属性：transform,transition和animation
1：
transform
transform变形动画是让某个元素改变形状，大小和位置
主要包括
旋转rotate
扭曲skew
缩放scale
移动translate
矩阵变形matrix
例如
将一个元素顺时针旋转30
transform:rotate(30deg);
2：
把某个元素水平移动100px,垂直移动20px
transform:translate(100px,20px);
-------------------
2:
transition
transition允许css的属性值在一定时间区间内平滑的过渡
这种效果可以在鼠标单击，获得焦点，被单击或对元素所做的任何改变中触发
并且平滑的以动画效果改变css属性值
代码
img{width:150px;height:150px; transition:width 3s ease 1s,height 3s ease 1s;}
img:hover{width:450px;height:450px;}
解析：
图像会变化
当鼠标放在缩略图上时，缩略图的高度在延迟1s后发生先快后慢的变化，并且变化的时间持续3秒
注意
过渡效果除了ease，还有linear，ease-in，ease-out,ease-in-out,cubic-bezier(自定义速度)
-------------------------
3：
animation
keyframes,叫做关键帧
@keyframes的规则是创建动画，keyframes的语法规则为：命名由“@keyframes”开头，后面紧接着动画的名称，再加上一对花括号
例如
定义一个动画，背景从红色到黄色
@keyframes myfirst{
from {background:red;}
to{background:yellow;}
}
当利用@keyframes创建动画时，要把他绑定到一个选择器，否则动画不会有任何效果
例如把上面的“myfirst”动画捆绑在div元素上，时长为5秒
div{
animation:myfirst 5s;
-webkit-animation:myfirst 5s;
}
提示：
必须定义动画的名称和持续时间，如果省略持续时间，动画将无法进行，因为默认值是0