介绍

animation动画主要是由@keyframes规则是创建动画

@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

在 @keyframes 中创建动画时，要把它捆绑到某个选择器，否则不会产生动画效果

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称和时长

动画是使元素从一种样式逐渐变化为另一种样式的效果,请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器

浏览器支持

基础用法

动画属性

菜鸟教程css3 动画

使用jQuery创建动画

jquery动画W3School

介绍

animate() 方法执行CSS属性集的自定义动画,该方法通过CSS样式将元素从一个状态改变为另一个状态

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）

使用 "+=" 或 "-=" 来创建相对动画

例如:$('.t1').animate({ height: 'toggle' }, 'slow')