过渡和动画是CSS3的重要组成部分。今天有空的话，学习一些相关的内容记录一下。在我们开始之前，让我们看一下CSS3转换。TransformCSS3变换分为以下几种：translatemoverotate rotatescale zoomskew tiltmatrix mix每种变换都有对应的3d版本注意：封闭内联元素不支持transitions，transitions和动画：比如,,等。可以通过添加样式 display:inline-block或者 display:block转换为块级元素.translate Movetranslate()方法根据给定的左侧（X轴）和顶部（Y轴）位置的参数从当前元素位置移动。span{显示：内联块；转换：翻译（50px，100px）；/*向下移动50px，向右移动100px*/-ms-transform:translate(50px,100px);/*IE9*/-webkit-transform:translate(50px,100px);/*Safari和Chrome*/}rotaterotate()方法将元素顺时针旋转给定的度数。允许负值，这样元素逆时针旋转。我{显示：块；变换：旋转（30度）；/*顺时针旋转30度，负数表示逆时针旋转*/-ms-transform:rotate(30deg);/*IE9*/-webkit-transform:rotate(30deg);/*Safari和Chrome*/}scalescale()方法，元素的大小增加或减少，取决于宽度（X轴）和高度（Y轴）的参数：div{display:inline;/*缩放不会对这个设置生效*/transform:scale(2,3);/*长度扩大2倍，宽度扩大3倍，小于1的小数减少*/-ms-transform:scale(2,3);/*IE9*/-webkit-transform:scale(2,3);/*Safari*/transform:scale(2,3);/*标准语法*/}skewskewskew()包含两个参数值，分别表示X轴和Y轴的倾斜角度。如果第二个参数为空，则默认为0。如果参数为负数，则表示向相反的方向倾斜。（把它想象成一根直柱子，被推歪了……）skewX();表示仅在X轴（水平方向）上倾斜。（水平推动...）skewY();表示仅在Y轴（垂直方向）上倾斜。（从上往下推...）div{transform:skew(30deg,20deg);-ms-transform:skew(30deg,20deg);/*IE9*/-webkit-transform:skew(30deg,20deg);/*Safari和Chrome*/}matrix将matrix()方法和2D变换方法合二为一。矩阵方法有六个参数，包含旋转、缩放、移动（平移）和倾斜的函数。div{变换：矩阵（0.866,0.5,-0.5,0.866,0,0）;-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/*IE9*/-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/*Safari和Chrome*/}screenshotsummary2Dversion3Dversiontransition在CSS3中，我们可以从一种样式更改为另一种样式以在另一时间添加某种效果，而无需使用Flash动画或JavaScript。transitions和animations的区别transitions和animations都可以改变元素的样式，但是它们之间有一些区别：transitions以元素的样式属性为目标，从一种样式变为另一种样式，样式根据贝塞尔曲线随时间变化，以及animations对于元素本身来说，通过关键帧来改变元素的样式效果过渡比动画要简单。控制效果越粗糙，动画消耗的性能越多，但可以制作出更复杂的效果。总的来说：一般简单的样式都会使用transition，如果确实需要复杂的效果，可以考虑使用动画transitionpropertiesdiv{transition-property:width;/*你可以使用更好的过渡*/transition-duration:1s;transition-timing-function:线性;转换延迟：2s；/*Safari*/-webkit-transition-property:width;-webkit-过渡持续时间：1s；-delay:2s;}/*shorthand*/div{transition:width1slinear2s;/*Safari*/-webkit-transition:width1slinear2s;}transitiontransitioncurveanimate动画CSS3，我们可以创建动画，它可以用动画图像、Flash动画和JAVAScripts替换许多网页。动画属性：动画制作流程1.通过@keyframes规则创建动画/*创建动画，字体颜色由红变蓝*/@keyframeschangeColor{from{color:red;}到{颜色：蓝色；}}2.元素绑定固定动画跨度{display:inline-block;/*行内元素应该转换成块元素*/animation:changeColor1slinear;/*绑定动画，并设置动画时间和执行曲线*/}动画也可以使用百分比更详细的控制动画过程：@keyframeschangeColor{0%{color:red;}25%{color:yellow;}50%{color:green;}75%{color:pickle;}100%{color:blue;}}/*Safari和Chrome*/@-webkit-keyframeschangeColor{0%{color:red;}25%{color:yellow;}50%{color:green;}75%{color:pickle;}100%{颜色：蓝色；}}
