建议收藏：css3新增的属性 - 分享

一、transform变换效果

CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
属性有两个：transform 和 transform-origin

对于 transform 的属性值，具体如下表：

属性值	说明
none	无变换
translate(长度值或百分数值) translateX(长度值或百分数值) translatY(长度值或百分数值)	在水平方向、垂直方向或两个方向上平移 元素。
scale(数值) scaleX(数值) scaleY(数值)	在水平方向、垂直方向或两个方向上缩放 元素
rotate(角度)	旋转元素
skew(角度) skewX(角度) skewY(角度)	在水平方向、垂直方向或两个方向上使元 素倾斜一定的角度
matrix(4~6 数值，逗号隔开)	指定自定义变换

 

//向水平和垂直各移动 200 像素，也可以使用百分比
transform: translate(200px,200px);
 
//向水平平移 200 像素，不加后面的 0 也可以
transform: translate(200px,0);
transform: translateX(200px);
 
//向垂直平移 200 像素
transform: translate(0,200px);
transform: translateY(200px);
 
//水平、垂直方向放大 1.5 倍
transform: scale(1.5);
transform: scale(1.5,1.5);
 
//水平、垂直方向缩小 0.8 倍
transform: scale(0.8,0.8);
 
//水平方向放大 1.5 倍
transform: scaleX(1.5);
 
//垂直方向放大 1.5 倍
transform: scaleY(1.5);
 
//旋转元素，0 ~ 360 度之间，负值均可
transform: rotate(-45deg);
 
//倾斜元素，0 ~ 360 度之间，负值均可
transform: skew(45deg, 20deg);
 
//水平倾斜元素，0 ~ 360 度之间，负值均可
transform: skewX(45deg);
 
//垂直倾斜元素，0 ~ 360 度之间，负值均可
transform: skewY(45deg);
 
//通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧
transform: matrix(1,0,0,1,30,30);
 
//不同的值可以累计，通过空格分割
transform: rotate(-45deg) scale(1.5);

二．transform-origin
transform-origin 属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。
具体设置方案参考如下表：

属性值	说明
百分数值	指定元素 x 轴或 y 轴的起点
长度值	指定距离
left center right	指定 x 轴的位置
top center bottom	指定 y 轴的位置

这个属性是用来改变变形的基准点的，默认是在元素的中心位置，如果你改变了基准点。
它就会按照这个基准点进行变形。
//默认值，以中心点变形
transform-origin: center center;
transform-origin: 50% 50%;
//以左上角为基准点变形
transform-origin: left top;
transform-origin: 0px 0px;
三．浏览器版本
CSS3 中的变形效果最低版本和需要前缀版本如下：

	Opera	Firefox	Chrome	Safari	IE
支持需带前缀	11.5 ~ 22	3.5 ~ 15	4 ~ 35	3.1 ~ 8	9.0+
支持不带前缀	23+	16+	26+	无	10.0+

 

//兼容完整版
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;

二、transition过渡效果

过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover、:focus、
:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能，主要属性如
下表：
属性 说明

transition-property 指定过渡或动态模拟的 CSS 属性
transition-duration 指定完成过渡所需的时间
transition-timing-function 指定过渡的函数
transition-delay 指定过渡开始出现的延迟时间
transition 简写形式，按照上门四个属性值连写

我们先创建一个没有过渡效果的元素，然后通过:hover 来触发它。在没有任何过渡效
果的触发，会立即生硬的执行触发。

//设置元素样式
div {
    width: 200px;
    height: 200px;
    border:1px solid green;
}
//鼠标悬停后背景变黑，文字变白
div:hover {
    color: white;
    margin-left: 50px;
}

二．transition-property
首先，设置过渡的第一个属性就是指定过渡的属性。同样，你需要指定你要过渡某个元
素的两套样式用于用户和页面的交互。那么就使用 transition-property 属性，详细属性
值如下表：
属性值 说明：

none 没有指定任何样式
all

默认值，指定元素所支持 transition-property 属性的样式
指定样式 指定支持 transition-property 的样式
从上门的列表中来看，一般来说，none 用于本身有过渡样式从而取消。而 all，则是
支持所有 transition-property 样式，还有一种是指定 transition-property 中的某些
样式。那么 transition-proerty 支持的样式有哪些？

如下表所示：

样式名称  样式类型
background-color  color(颜色)
background-image  only gradients(渐变)
background-position  percentage, length(百分比，长度值)
border-bottom-color  color
border-bottom-width  length
border-color  color
border-left-color  color
border-left-width  length
border-right-color color
border-right-width  length
border-spacing  length
border-top-color  color
border-top-width  length
border-width  length
bottom  length, percentage
color  color
crop  rectangle
font-size  length, percentage
font-weight  number
grid-*  various
height  length, percentage
left  length, percentage
letter-spacing  length
line-height  number, length, percentage
margin-bottom  length
margin-left  length
margin-right  length
margin-top  length
max-height  length, percentage
max-width  length, percentage
min-height  length, percentage
min-width  length, percentage
opacity  number
outline-color  color
outline-offset  integer
outline-width  length
padding-bottom  length
padding-left  length
padding-right  length
padding-top  length
right  length, percentage
text-indent  length, percentage
text-shadow  shadow
top  length, percentage
vertical-align  keywords, length, percentage
visibility  visibility
width  length, percentage
word-spacing  length, percentage
z-index  integer
zoom  number
//设置背景和文字颜色采用过渡效果
transition-property: background-color, color, margin-left;

三．transition-duration
如果单纯设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默
认情况下过渡时间为 0。
//设置过渡时间为 1 秒钟，如果是半秒钟可以设置为.5s

transition-duration: 1s;

四．transition-timing-function
当过渡效果运行时，比如产生缓动效果。默认情况下的缓动是：元素样式从初始状态过
渡到终止状态时速度由快到慢，逐渐变慢，即 ease。也是默认值，其他几种缓动方式如下
表所示：
属性值 说明
ease
默认值，元素样式从初始状态过渡到终止状态时速度由
快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,
0.25, 1.0)
linear
元素样式从初始状态过渡到终止状态速度是恒速。等同
于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease-in
元素样式从初始状态过渡到终止状态时，速度越来越
快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,
1.0, 1.0)
ease-out
元素样式从初始状态过渡到终止状态时，速度越来越
慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,
1.0)
ease-in-out
元素样式从初始状态过渡到终止状态时，先加速，再减
速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
//恒定速度
transition-timing-function: linear;
以上五种都是设定好的属性值，我们也可以自定义这个缓动。使用 cubic-bezier()
属性值，里面传递四个参数 p0,p1,p2,p3，值在 0~1 之间。

//自定义缓动
transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);

至于具体这些数值干什么的，怎么才可以精确得到相关的信息，这个要了解计算机图形
学中的三次贝塞尔曲线的相关知识，类似与 photoshop 中的曲线调色。这里我们忽略。
还有一种不是平滑过渡，是跳跃式过渡，属性值为：steps(n,type)。第一个值是一
个数值，表示跳跃几次。第二个值是 start 或者 end，可选值。表示开始时跳跃，还是结
束时跳跃。

//跳跃 10 次至结束
transition-timing-function: steps(10,end);

五．transition-delay
这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。使用
transition-delay 属性值。如果有多个样式效果，可以设置多个延迟时间，以空格隔开。

//设置延迟效果
transition-delay: 0s, 1s, 0s;

六．简写和版本
我可以直接使用 transition 来简写，有两种形式的简写。第一种是，每个样式单独声
明；第二种是不去考虑样式，即使用 all 全部声明。

//单独声明
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left
1s ease 0s;
 
//如果每个样式都是统一的，直接使用 all
transition: all 1s ease 0s;
为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：
Opera Firefox Chrome Safari IE
支持需带前缀 15 ~ 22 5 ~ 15 4 ~ 25 3.1 ~ 6 无
支持不带前缀 23+ 16+ 26+ 6.1+ 10.0+
    
//兼容完整版
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
transition: all 1s ease 0s;

七、animation动画效果

CSS3 提供了类似 Flash 关键帧控制的动画效果，通过 animation 属性实现。那么之
前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的
局限性。

animation 实现动画效果主要由两个部分组成：
 
1.通过类似 Flash 动画中的关键帧声明一个动画；
 
2.在 animation 属性中调用关键帧声明的动画。
 
CSS3 提供的 animation 是一个复合属性，它包含了很多子属性。
如下表所示：
属性 说明
 
animation-name
用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。
CSS 加载时会应用 animation-name 指定的动画，从而执行动画。
 
animation-duration 用来设置动画播放所需的时间
animation-timing-function 用来设置动画的播放方式
animation-delay 用来指定动画的延迟时间
animation-iteration-count 用来指定动画播放的循环次数
animation-direction 用来指定动画的播放方向
animation-play-state 用来控制动画的播放状态
animation-fill-mode 用来设置动画的时间外属性
animation 以上的简写形式
 
除了这 9 个属性之外，动画效果还有一个重要的属性，就是关键帧属性：@keyframes。
它的作用是声明一个动画，然后在 animation 调用关键帧声明的动画。
 
//基本格式，“name”可自定义
@keyframes name {
/*...*/
}

八．属性详解

1. 在讲解动画属性之前，先创建一个基本的样式。

//一个 div 元素
<div>我是 HTML5</div>
 
//设置 CSS
div {
    width: 200px;
    height: 200px;
    border: 1px solid green;
}
 
1.@keyframes
 
//创建动画的第一步，先声明一个动画关键帧。
@keyframes myani {
    0% {
        margin-left:0px;
    }
    50% {
        margin-left:100px;
    }
    100% {
 
        margin-left:0px;
    }
}
 
 
//或者重复的，可以并列写在一起
@keyframes myani {
    0%, 100% {
        margin-left:0px;
    }
    50% {
        margin-left:100px;
    }
}

2.animation-name

//调用@keyframes 动画
animation-name: myani;
属性值 说明
none 默认值，没有指定任何动画
INDEX 是由@keyframes 指定创建的动画名称

3.animation-duration

//设置动画播放的时间
animation-duration: 1s;
 
当然，以上通过关键帧的方式，这里插入了三个关键帧。0%设置了白色和左偏移为 0，
和初始状态一致，表明从这个地方开始动画。50%设置了黑色，左偏移 100px。而 100%则
是最后一个设置，又回到了白色和左偏移为 0。整个动画就一目了然了。
而对于关键帧的用法，大部分用百分比比较容易控制，当然，还有其他一些控制方法。
 
//从什么状态过渡到什么状态
@keyframes myani {
    from {
        margin-left:0px;
    }
    to {
        margin-left:100px;
    }
}

4.animation-timing-function

//设置缓动
animation-timing-function: ease-in;
属性值 说明
 
ease
默认值，元素样式从初始状态过渡到终止状态时速度由
快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,
0.25, 1.0)
 
linear
元素样式从初始状态过渡到终止状态速度是恒速。等同
于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
 
ease-in
元素样式从初始状态过渡到终止状态时，速度越来越
快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,
1.0, 1.0)
 
ease-out
元素样式从初始状态过渡到终止状态时，速度越来越
慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,
1.0)
 
ease-in-out
元素样式从初始状态过渡到终止状态时，先加速，再减
速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
 
cubic-bezier 
自定义三次贝塞尔曲线

5.animation-delay

//设置延迟时间
animation-delay: 1s;

6.animation-iteration-count

//设置循环次数
animation-iteration-count: infinite;
属性值 说明
次数 默认值为 1
infinite 表示无限次循环

7.animation-direction

//设置缓动方向交替
animation-direction: alternate;
属性值 说明
normal 默认值，每次播放向前
alternate 一次向前，一次向后，一次向前，一次向后这样交替

8.animation-play-state

//设置停止播放动画
animation-play-state: paused;

9.animation-fill-mode

//设置结束后不在返回
animation-fill-mode: forwards;
 
属性值 说明
none 默认值，表示按预期进行和结束
forwards 动画结束后继续应用最后关键帧位置，即不返回
backforwards 动画结束后迅速应用起始关键帧位置，即返回
both 根据情况产生 forwards 或 backforwards 的效果
 
//both 需要结合，次数和播放方向
animation-iteration-count: 4;
animation-direction: alternate;

九．简写和版本

//简写形式完整版
animation: myani 1s ease 2 alternate 0s both;
为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：
Opera Firefox Chrome Safari IE
支持需带前缀 15 ~ 29 5 ~ 15 4 ~ 42 4 ~ 8 无
支持不带前缀 无 16+ 43+ 无 10.0+
    
//兼容完整版，Opera 在这个属性上加入 webkit，所以没有-o-
-webkit-animation: myani 1s ease 2 alternate 0s both;
-moz-animation: myani 1s ease 2 alternate 0s both;
-ms-animation: myani 1s ease 2 alternate 0s both;
transition: all 1s ease 0s;
 
//@keyframes 也需要加上前缀
@-webkit-keyframes myani {...}
@-moz-keyframes myani {...}
@-o-keyframes myani {...}
@-ms-keyframes myani {...}
keyframes myani {...}