关于CSS3的变形、过渡、动画、关联属性

MitSwank 2年前
   <h2>一、变形</h2>    <p>transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。</p>    <p>示例:</p>    <pre>  <code class="language-css">transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);  /*矩阵变形*/  matrix(<number>,<number>,<number>,<number>,<number>,<number>);  /*透视*/  perspective(length);  </code></pre>    <p>transition:过度属性</p>    <p>transition:过度效果的css属性名 过度效果时长 速度效果的速度曲线 过度效果开始时间;</p>    <pre>  <code class="language-css">transition: property duration timing-function delay;  /*示例*/  transition:1s ease all;  -webkit-tansition:1s ease all;  -moz-transition:1s ease all;  -o-transition:1s ease all;  </code></pre>    <p>rotate():二维空间旋转元素。</p>    <p>若元素设置了perspective值,可用rotate3d()实现三维空间内旋转。</p>    <pre>  <code class="language-css">rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/  rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/  rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/  </code></pre>    <p>scale()</p>    <pre>  <code class="language-css">scaleX(<number>)/*只在X轴(水平方向)缩放元素*/  scaleY(<number>)/*只在Y轴(垂直方向)缩放*/  scaleZ(<number>)/*只在Z轴缩放,前提:元素设定透视值*/  </code></pre>    <p>translate([,]):移动,是位移量。</p>    <pre>  <code class="language-css">translateX(<translation-value>);/*只在X轴(水平方向)移动*/  translateY(<translation-value>);/*只在Y轴(垂直方向)移动*/  translateZ(<translation-value>);/*只在Z轴移动,前提:元素设置透视值*/  </code></pre>    <p>skew():倾斜</p>    <pre>  <code class="language-css">skewX(<angle>);/*只在X轴(水平)倾斜*/  skewY(<angle>);/*只在Y轴(垂直)倾斜*/  </code></pre>    <p>matrix(a,c,e,b,d,f):矩阵变形,c、e的值用正弦或余弦值表示。</p>    <p>a:表示scaleX(); X轴缩放</p>    <p>c:skewY(); Y轴倾斜</p>    <p>e:skewX(); X轴倾斜</p>    <p>b:scaleY(); Y轴缩放</p>    <p>d:translateX() X轴移动</p>    <p>f:translateY() Y轴移动</p>    <pre>  <code class="language-css">transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);  </code></pre>    <p>perspective():透视</p>    <pre>  <code class="language-css">.wrap{      perspective:1000px;   }  .wrap .child{      transform:perspective(1000px);  }  </code></pre>    <h2>二、过渡</h2>    <p>transition-property:过度的属性</p>    <pre>  <code class="language-css">transition-property:all;/*针对所有元素都有过度效果*/  transition-property:none;/*没有元素有过度效果*/  transition-property:ident;/*指定css属性有过度效果,例如width*/  </code></pre>    <p>transition-duration:过度时间</p>    <p>transition-delay:延迟时间,为负数时,过度动作会从该时间点开始显示,之前的动作会被截断。</p>    <p>transition-timing-function:过度效果,默认ease。</p>    <pre>  <code class="language-css">transition-timing-function:ease;/*缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔*/  transition-timing-function:linear;/*线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/  transition-timing-function:ease-in;/*渐显效果,等同于cubic-bezier(0.42,0,1.0,1.0)函数*/  transition-timing-function:ease-out;/*渐隐效果,等同于cubic-bezier(0,0,0.58,1.0)函数*/  transition-timing-function:ease-in-out;/*渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数*/  transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/  </code></pre>    <h2>三、动画</h2>    <p>animation-name:动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义,如果提供多个属性值用逗号隔开。</p>    <p>@keyframes相当于一个命名空间,后面跟一个名词,如果在class中的animation-name定义了与之对应的name就可以执行动画。定义动画时可直接使用关键字from和to,从一种状态过度到另一种状态。</p>    <pre>  <code class="language-css">.animation_name{      left:0;      top:100px;      position: absolute;      -webkit-animation: 0.5s 0.5s ease infinite alternate;      -moz-animation: 0.5s 0.5s ease infinite alternate;      -webkit-animation-name:demo;      -moz-animation-name:demo;  }  @-webkit-keyframes demo{      from{left:0;}      to{left:400px;}  }  @-webkit-keyframes demo1{      0%{left:0;}      50%{left:200px;}      100%{left:400px;}  }  </code></pre>    <p>animation-duration:动画时间</p>    <p>animation-timing-function:播放方式,取值如下:</p>    <p>ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。</p>    <p>linear:线性效果</p>    <p>ease-in:渐显效果</p>    <p>ease-out:渐隐效果</p>    <p>ease-in-out:渐显渐隐效果</p>    <p>step-start:马上跳转到动画结束状态</p>    <p>step-end:保持动画开始状态,到动画执行时间结束,马上跳转到动画结束状态</p>    <p>step([,[start | end]]?):第一个参数number为指定的间隔数,即把动画分为n步阶段性显示,第二个参数默认为end,设置最后一步状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,以animation-fill-mode的设置为动画结束状态。</p>    <p>cubic-bezier(,,,):特殊的立方赛贝尔曲线效果</p>    <p>animation-delay:开始播放时间</p>    <p>animation-iteration-count:播放次数,取值为infinite时表示无限循环播放</p>    <p>animation-direction:播放方向,取值为:</p>    <p>normal:正常方向</p>    <p>reverse:动画反向运行,方向始终与normal相仿</p>    <p>alternate:动画会循环正反交替运动</p>    <p>animation-fill-mode:播放后的状态,取值:</p>    <p>none:默认值,不设置</p>    <p>forwards:结束后保持动画结束的状态</p>    <p>backwards:结束后返回动画开始时状态</p>    <p>both:结束后可遵循forwards和backwards两个规则</p>    <p>animation-play-state:检索或设置对象动画的状态,取值:</p>    <p>running:默认,运动</p>    <p>paused:暂停</p>    <p>四、关联属性</p>    <p>transform-origin:变形原点,transform的参照点,默认为元素的中心点。有两个参数,参数一为横坐标,参数二为纵坐标。</p>    <p>percentage:用百分比指定坐标值,可负</p>    <p>length:用长度指定坐标值,可负</p>    <p>left center right:水平方向取值</p>    <p>top center bottom:垂直方向取值</p>    <p>perspective-prigin:透视原点,定义在X轴和Y轴的3D元素,允许改变3D元素的底部位置,定义该属性时,它是一个元素的子元素,透视图,而不是元素本身。</p>    <p>注意:使用该属性必须和perspective属性一起用,只影响3D转换的元素。</p>    <p>取值:percentage、length、left、center、right、top、center、bottom</p>    <p>backface-visibility:隐藏内容的背面,默认情况下背面可见,反转后变换的内容仍然可见,当backface-visibility设置hidden时,旋转后内容将隐藏,旋转后正面将不再可见。</p>    <p>取值:visible、hidden</p>    <p>transform-style:3D呈现,设置内嵌的元素在3D空间如何呈现,有两个值:</p>    <p>flat:所有子元素在2D平面呈现</p>    <p>preserve-3d:保留3D空间</p>    <p> </p>    <p>来自:http://web.jobbole.com/90685/</p>    <p> </p>