CSS3 变形与动画

一、变形

1、旋转 rotate()

定义：通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

          如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

例如： transform: rotate(45deg);

2、扭曲 skew()

定义：能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

例如：transform:skew(45deg);

Skew()具有三种情况：

（1）skew(x,y)第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。

（2）skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

（3）skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

注：这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

       单位是deg；x 为正逆时针，为负顺时针，y正好相反；

3、缩放 scale()

定义：scale()以元素中心为基点进行缩放。

         1.scale(X,Y)使元素水平和垂直方向同时缩放; 

         2.scaleX(x)使元素水平方向缩放;

         3.scaleY(y)使元素垂直方向绽放;

例如：transform: scale(1.1);

注：缩放值默认为1，值>1时，扩大，值<1时缩小。

       当 scale 的值为一个时，表示X和Y同时缩放。

4、位移 translate()

定义：可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

例如：transform:translate(-50%,-50%);（让不知道宽度和高度的元素实现水平、垂直居中）

translate我们分为 三种情况：

1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

5、矩阵 matrix()

定义：matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY())

          transform: matrix(水平缩放，垂直扭曲，水平扭曲，垂直缩放，水平偏移，垂直偏移）

                           matrix(长度缩放，y轴扭曲，x轴扭曲，宽度缩放，x位移，y位移)

          matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。

注：（1）a为元素的水平伸缩量，1为原始大小；b为纵向扭曲，0为不变；c为横向扭曲，0不变；

                d为垂直伸缩量，1为原始大小；e为水平偏移量，0是初始位置；f为垂直偏移量，0是初始位置；

       （2）在CSS3中的变形，如rotate(),skew(),scale(),translate()，都可以使用矩阵matrix()函数来代替

                Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y);

                Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0);

                Matrix()与rotate()关系：rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0)

                Matrix()与skew()关系：skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)

例如：transform: matrix(1,0,0,1,50,50);（通过matrix()函数实现translate(50px,50px)的效果）

6、原点 transform-origin

定义：默认原点：一般是中心点，中心点是居于元素X轴和Y轴的50%处。即center处，在没有重置transform-origin改变元素原点位置的情况下，CSS

          变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。

          transform的origin属性可以改变元素的中心的。元素的中心的用 于：旋转rotate、位移translate、缩放scale、扭曲skew。

取值 ：四边中心：top，right，bottom，left；四角：top left ，top right ，bottom right ，bottom left ；中心处：center 。

例如： transform-origin: left top;

二、动画之transition

1、过渡属性 transition-property

定义：就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

第一，在默认样式中声明元素的初始状态样式；

第二，声明过渡元素最终状态样式，比如悬浮状态；

第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对

应具有过渡的CSS属性主要有：

background-color/position border-bottom(right..)-color/width border/letter/word-spacing bottom clip color font-size/weight height 

left line-height margin/padding-bottom.. max-height/width min-height/width opacity outline-color/width/height/bottom 

text-indent/shadow vertical-align visibility width z-index

注：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

2、过渡所需时间 transition-duration

定义：主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

3、过渡函数 transition-timing-function

定义：指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况。

  

主要有以下几种函数：

（1）ease 由快到慢，逐渐变慢（等于cubic-bezier(0.25,0.1,0.25,1)）。 

（2）ease-in 加速（渐显效果）（等于 cubic-bezier(0.42,0,1,1)）。 

（3）ease-out 减速（渐隐效果）（等于 cubic-bezier(0,0,0.58,1)）。 

（4）ease-in-out 先加速，再减速（渐显渐隐效果）（等于 cubic-bezier(0.42,0,0.58,1)）。

（5）Linear：恒速。

4、过渡延迟时间 transition-delay

定义：主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

注：有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

           transition: all .5s ease-in .2s;

三、动画之keyframes和animation

1、Keyframes

定义：被称为关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

注：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

       Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。

       @keyframes 函数名{}一般不可以放在CSS文件开头，因为CSS文本规定不可以以@符号开头。一般可以把其他样式提前放在CSS开头。

       FF46、IE11，如果元素没有设置border，动画里的border属性就无效。

例如：先设置@keyframes changecolor{}，然后设置div的宽高 背景，字体颜色以及外边距。

          最后设置div:hover{},执行动画：animation：changecolor 5s ease-out .2s(具有兼容性)。

          transition:是css属性触发，animation：是调用相关函数时触发。

2、调用动画 animation-name

定义：主要是用来调用 @keyframes 定义好的动画。

语法：animation-name: none | IDENT [,none|DENT]*;

注： animation-name 调用的动画名（IDENT）需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

        none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

        需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

3、动画播放时间 animation-duration

定义：是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。

语法：animation-duration: <time>[,<time>]*

注： 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

4、动画播放方式 animation-timing-function

定义：主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。

语法：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease            | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

注： 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

5、动画开始播放时间 animation-delay

定义：主要用来触发动画播放的时间点。

语法：animation-delay:<time>[,<time>]*

6、动画播放次数 animation-iteration-count

语法：animation-iteration-count: infinite | <number> [, infinite | <number>]*

注： 其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。

        如果取值为infinite，动画将会无限次的播放。

7、动画播放方向 animation-direction

语法：animation-direction:normal | alternate [, normal | alternate]*

注：normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

       另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

8、动画播放状态 animation-play-state

语法：其主要有两个值：running（进行）和paused(暂停)。

注：这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放，另外如果暂停了播放，元素的样式将回到原始设置的状态。

8、动画时间外属性 animation-fill-mode

定义：在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。

注：none默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。

       forwards表示动画在结束后继续应用最后的关键帧的位置。

       backwards会在向元素应用动画样式时迅速应用动画的初始帧。

       both元素动画同时具有forwards和backwards效果。