css3中动画的几个属性：css3中的transform、transition和animation。1.CSS3变换（transform）语法：transform:none|[]*即：transform:rotate|规模|歪斜|翻译|矩阵；1.1旋转rotate()rotate():通过指定的angle参数为元素指定一个2D旋转（2D旋转），需要先定义transform-origin属性（默认旋转中点为中心点）.transform-origin定义了旋转的基点，其中angle指的是选择角度，正向顺时针旋转，负向逆时针旋转。（变形的基本要点在之前的文章中都有讲解，https://segmentfault.com/a/11...）1.2。移动translate(X,Y)transform(100px,20px);transform:translateX(100px):transform:translateY(20px)1.3,scalingscale(X,Y)scale([,]):提供两个参数执行[sx,sy]缩放向量以指定一个2D缩放比例（2Dscaling）。如果没有提供第二个参数，则取与第一个参数相同的值。Y是一个可选参数。如果不设置Y值，则表示X和Y方向的缩放系数相同，X为标准。如：transform:scale(2,1.5);1.4、obliqueskew()skew([,])：X轴和Y轴上的倾斜变换（倾斜变换）。第一个参数对应X轴，第二个参数对应Y轴。如果不提供第二个参数，则值为0，即Y轴方向没有倒角。skew用于扭曲和改变元素的线条。第一个参数是水平方向的扭曲角度，第二个参数是垂直方向的扭曲角度。第二个参数为可选参数，如果不设置第二个参数，则Y轴为0deg。同样以元素的中心为基点，我们也可以通过transform-origin改变元素的基点位置。变换：歪斜（30度，10度）；方法：X轴：正数在左，负数在右；Y轴：正数向下，负数向上二、CSS3过渡（transition）属性详解transition-property不是所有的属性都可以过渡，只有属性有中间点值才有过渡效果。transition-duration指定从一个属性转换到另一个属性需要多长时间。默认值为0，当为0时表示变化是瞬时的，看不到过渡效果。transition函数，有以下几种：liner：匀速ease-in：加速ease-out：减速ease-in-out：先加速再减速cubic-bezier：三次贝塞尔曲线，triggertransition可以自定义简单代码就会不触发任何transition操作，需要通过用户行为（如点击，hover等）触发，触发方式有：:hoever:focus:checked媒体查询触发JavaScripttriggerslimitationstransition的优点是它很容易使用，但它有几个主要的限制。(1)Transition需要事件触发，不能在网页加载时自动发生。(2)Transition是一次性的，除非被重复触发，否则不能重复。(3)transition只能定义起始状态和结束状态，不能定义中间状态，也就是说只有两种状态。(4)一个转换规则只能定义一个属性的变化，不能涉及多个属性。CSSAnimation就是为了解决这些问题而提出的。3、CSS3动画（animation）CSS3的动画属性可以像Flash动画一样通过控制关键帧来控制动画的每一步，实现更复杂的动画效果。实现动画效果的Ainimation主要由两部分组成：1）通过类似于Flash动画的帧声明一个动画；2）调用animation属性中关键帧声明的动画。**注意：动画属性目前已经被大部分浏览器支持，但是需要添加浏览器前缀！animation动画属性应该先列在表格里，解释属性，感觉会更清楚：（1）animation-name：none是默认值，不会有动画效果，可以用覆盖任何动画(2)animation-duration:default值为0表示动画周期为0，即没有动画效果(3)animation-timing-function:同transition-timing-function(4）animation-delay：开始动画时等待的时间（5）animation-iteration-count：定义动画播放的次数，默认为1，如果是infinite，则无限次播放loop(6)animation-direction：默认是nominal，每次循环向前播放，(0-100)，其他值为alternate，如果是偶数次则动画向前播放，如果是baseword,会反方向播放(7)animation-state:默认是running,play,paused,pause(8)animation-fill-mode：定义动画开始前和结束后发生的操作，默认值为none，当动画结束时，恢复到动画没有开始时的状态；forwards，动画结束后，继续套用上一个关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：依次应用前向和后向规则。@keyframesCSS3的动画主要包括两部分：1.声明一个带关键帧的动画，2.在动画中调用关键帧声明的动画。@keyframes是关键帧。这个帧类似于Flash中的帧，一个动画中可以有很多帧。@keyframes中的一条样式规则由多个百分比组成，可以在这条规则上创建多个百分比，实现千变万化的效果。此外，@keyframes必须以webkit为前缀。例如：div:hover{-webkit-animation:1schangeColor;动画：1schangeColor；}@-webkit-keyframeschangeColor{0%{背景：#c00;}50%{背景：橙色；}100%{背景：黄绿色；}}@keyframeschangeColor{0%{背景：#c00;}50%{背景：橙色；}100%{背景：黄绿色；}}上面代码中0%和100%的百分号不能省略，0%可以用from代替，100%可以用to代替。要使changeColor动画生效，必须通过CSS3animation属性调用。区别在于animation属性和transition类似，都是随时间改变元素的属性值，主要区别在于：transition需要触发一个事件来随时间改变它的CSS属性；动画不需要触发任何事件，也可以随时间显式改变元素的CSS属性来实现动画效果
