css3新增属性简述——第二讲

css3中实现了一个很强大的功能就是给元素设置动画。在早期的开发中，我们想要实现动画效果，一般都是通过Javascript或Flash来完成，这样的实现方式远远不如直接设置css属性来实现简单快捷，所以本期我们就来学习一下在css3中是如何来为一个元素设置动画效果的吧。

动画

transform变形 ：

语法: transform: rotate | scale | skew | translate | matrix | none;
transform主要向元素应用2D或3D转换，在CSS3中transform允许我们对元素进行如下几种操作：

1. 旋转rotate: rotate(angle) 传入参数，规定元素旋转角度。 rotate()函数通过传入参数使元素相对于原点进行旋转。如果传入的是正值，元素相对于原点顺时针旋转，若是负值，则逆时针旋转。

.test div {
    height: 200px;
    width: 200px;
    transform: rotate(45deg);
}
复制代码

2. rotate3d(x,y,z,angle): 定义3D旋转。
3. 扭曲skew：skew(x-angle,y-angle): 扭曲，定义元素沿X轴和Y轴的倾斜转换。与rotate()函数不同的是，skew()函数会在倾斜的同时改变元素的形状。
4. 缩放scale: scale(x,y) 让元素根据中心原点进行缩放。在一些浏览器中，我们无法使用font-size属性来控制图标大小，这时候就可以使用scale()函数来实现。

.test div {
    height: 200px;
    width: 200px;
}
.test div.active {
    transform: scale(1.5, 1.5);
}
复制代码

注： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。 5. 移动translate：translate()函数可以将元素向指定的方向移动，而不影响在X、Y轴上的任何Web组件。X轴默认向右为正，向左为负。Y轴默认向下为正，向上为负。

.test div {
    height: 200px;
    width: 200px;
}
.test div.move {
    transform: translate(50px, 50px);
}
复制代码

6. 矩阵变形matrix：matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素。

7. 改变原点transform-origin： 任何元素都有中心点，在没有设置原点的情况下，旋转，移动等函数都是以元素的原点为参照进行，但是在一些情况下，这样的变换不是我们想要的结果。所以我们可以通过自己设置原点的方式，来改变元素变换的位置。
   语法：transform-orgin: 关键词 | 百分比。
   关键词： top, right, bottom, left, center, top left, top right, bottom right, bottom left.
   百分比: 0-100%, 0-100%;

.test div {
    height: 200px;
    width: 200px;
}
.test div.active {
    transform-origin: top left;
    transform: translate(50px, 50px);
}
复制代码

transition过渡属性

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

transition过渡属性是由四个子属性组成的，你可以通过设置这四个子属性，来实现一个过渡的动画。
transition： transition-property transition-duration transition-timing-functio transition-delay；
注：四个属性之间是用空格隔开。

• transition-property:指定过渡的CSS属性
• transition-duration:指定完成过渡所需的时间
• transition-timing-function:指定过渡函数
• transition-delay:指定开始出现的延迟时间

1. transition-property：指定过渡动画的css属性名称。对应具有过渡的CSS属性主要有： background-color，background-position，font-size, font-weight, margin, padding, width, height等。
2. transition-duration: 主要用来设置一个属性过渡到另一个属性所需的时间，也就是过渡的持续时间。
3. transition-timing-function：指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况。主要的过渡函数有：ease, linear, ease-in, ease-out, ease-in-out。具体各个函数的实现效果可以参考W3C官网。
4. transition-delay：主要用来指定一个动画开始执行的时间。

.test div {
  width: 200px;
  height: 200px;
  background-color:red;
  transition: background-color .5s ease .1s;
}
.test div:hover {
  background-color: yellow;
}
复制代码

注：当我们想要为一个元素设置多个css属性的transition效果时，可以把多个transition的声明写在一起，用逗号（“，”）隔开即可。
如：

.test div { 
    transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;
}
复制代码

转载于:https://juejin.im/post/5c2b6992f265da611c271301