CSSPart7—CSS3(3)CSS33D变换就是在xyzdiv的三个方向上做一些操作{transform:rotateY(130deg);-webkit-transform:rotateY(130deg);/*Safari和Chrome*/-moz-transform:rotateY(130deg);/*Firefox*/}Others和scaletranslate可以在三个方向进行。CSS3transitionCSS3transition是CSS3中比较重要的一节，通过CSS3，我们可以在元素从一种样式变为另一种样式时为元素添加效果，而无需使用Flash动画或JavaScript。它是如何工作的CSS3过渡是元素从一种样式逐渐变为另一种样式的效果。为此，必须指定两件事：指定要应用效果的CSS属性指定效果的持续时间应用到width属性的过渡效果，长度为2秒：div{transition:width2s;-moz-transition:宽度2s;/*Firefox4*/-webkit-transition:width2s;/*Safari和Chrome*/-o-transition:width2s;/*Opera*/}注意：如果不指定持续时间，则不会有过渡效果，因为默认值为0。多个变化为多个样式添加过渡，添加多个属性，以逗号分隔：instance为宽度、高度和变换添加过渡：div{transition:width2s,height2s,transform2s;-moz-transition:宽度2s,高度2s,-moz-transform2s;-webkit-transition：宽度2s，高度2s，-webkit-transform2s；-o-transition:width2s,height2s,-o-transform2s;}transition属性是以下属性的简写：属性描述transition-property指定应用过渡的CSS属性的名称。transition-duration定义过渡效果需要多长时间。默认为0。transition-timing-function指定过渡效果的时序曲线。默认值为“轻松”。transition-delay指定过渡效果何时开始（延迟开始时间）。默认值为0。CSS3动画使用CSS3，我们可以创建动画来替代许多网页中的动画图像、Flash动画和JavaScript。CSS3animation:animation:动画名称动画时间第一步定义动画名称和动画内容：第二步确定动画属性@keyframesmyfirst{from{background:red;}to{background:yellow;}}@keyframesmyfirst1{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}div{animation:myfirst5s;}列出了CSS3动画属性在下表中@关键帧规则和所有动画属性：animation|除animation-play-state属性外的所有动画属性的简写属性。属性描述@keyframes指定动画。animation-name指定@keyframes动画的名称。animation-duration指定动画完成一个周期所需的秒数或毫秒数。默认为0。animation-timing-function指定动画的速度曲线。默认值为“轻松”。animation-delay指定动画开始的时间。默认为0。animation-iteration-count指定动画播放的次数。默认为1。animation-direction指定动画是否在下一个循环中反向播放。默认值为“正常”。animation-play-state指定动画是运行还是暂停。默认值为“正在运行”。animation-fill-mode指定对象在动画时间之外的状态。简写div{animation:myfirst5s;}比如我们想在动画结束后保持最终状态。box{动画：我的前5秒；}/*其实就是animation-fill-mode的属性值*/animation-fill-modeValueDescriptionNone不改变默认行为。forwards当动画完成时，保留最后一个属性值（在最后一个关键帧中定义）。在动画显示动画延迟指定的时间段之前向后应用开始属性值（在第一个关键帧中定义）。前向和后向填充模式均适用。附：推荐一个常用的css3动画库，基本可以搞定工作中90%的常用动画！https://daneden.github.io/ani...（需要翻墙！）更多文章请关注微信公众号：认真学习前端
