css3动画animation使用css3动画需要2个步骤给指定元素添加动画属性和属性值。每个浏览器的私有属性在前，通用属性在后。使用@keyframes定义动画过程名称。每个浏览器的私有属性在前，通用属性在后。animation定义动画的属性值。在@keyframes规则中指定一个CSS样式，动画将从当前样式逐渐变为新样式。div{-webkit-animation:myfirst5s;/*SafariChromeopera*/-ms-animation:myfirst5s;/*即*/-moz-animation:myfirst5s;/*ff*/animation:myfirst5s;}@-webkit-keyframesmyfirst/*SafariChromeopera*/{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}@-ms-keyframesmyfirst/*ie*/{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}@-moz-keyframesmyfirst/*ff*/{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}@keyframesmyfirst{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}功能可以改变任意的样式，任意的次数。使用from，to相当于0%，100%最好使用0%100%（对浏览器有好处）属性@keyframes指定动画简写属性名durationtiming-functiondelayiteration-countdirectionfill-modeplay-stateanimation-name指定@keyframes的名称animation-durationanimation-timing-functionlinear|ease|ease-in|ease-out|cubic-bezieranimation-delayanimation-iteration-count动画重复播放的次数animation-direction定义是否normal|reverse|alternate|alternate-reverse|initial|inheritanimation-fill-modestyle动画不播放时会反向播放animation-play-state定义动画是运行还是停止paused|runingtransitionie9和不支持以下。每个浏览器的私有属性在前，通用属性在后。//cssdiv{-webkit-transition:宽度2s;/*safarichrome*/-moz-transition:width2s;/*ff*/-o-transition:width2s;/*opera*/transition:width2s;width:200px;height:200px;}.w{width:300px;}//html
//js$('div').on('click',function(){$('div').addClass('w')})如果动画事件被触发，并且在动画结束前停止该事件，则放弃当前动画，停止该动画事件将从当前状态开始执行。属性transition-property设置转场动画的css属性名。transition-duration完成过渡动画的时间。transition-time-function过渡动画的速度曲线。transition-delay过渡动画的延迟时间。transition和animation的区别是前者只做transition效果，而后者侧重于动画效果。如果实在不清楚，就把transition记录为transition。过渡是直的，不能拆线。动画被记录为动画。动画可以做很多缝合。transformdiv{-ms-transform:rotate(30deg);/*即*/-webkit-s-transform:rotate(30deg);/*safarichromeopera*/-moz-s-transform:rotate(30deg);/*ff*/transform:rotate(30deg);}函数变换指定的元素。attributenonematrix(n,n,n,n,n,n)translate(x,y)2d移动translate3d(x,y,z)3d移动translateX(x)translateY(y)translateZ(z)scale(x,y)2dscalescale3d(x,y,z)3dscalescaleX(x)scaleY(y)scaleZ(z)rotate(a)2drotaterotate3d(x,y,z,a)3drotaterotateX(a)rotateY(a)rotateZ(a)skew(xa,ya)2dskewskewX(a)skewY(a)perspective(n)3d透视图|transform-origin|变形时的原点位置|center中心|x轴y轴z轴;//topleftrightbottomx%xpx||transform-b??ox|definitiontypesettingbox|border-box|fill-box,view-box,inherit,initial,unset||transform-type|嵌套元素是|flat的两种-维度|preserve-3dthree-dimensional|transform在三维空间中呈现的是一种变换（不理解transformation的可以理解为变形）。翻译是移动。是transform的一个属性值。没有动画。过渡就是过渡。有动画。2018/02/12由石头