内容包括:

  • 概述
  • CSS3变形
  • CSS3过渡
  • CSS3动画
  • 总结

##概述

##CSS3 变形 #####1.1 CSS3变形简介

CSS3变形是一些效果的集合,比如平移、旋转、缩放、倾斜效果等,每个效果被称作变形函数,操作元素进行相应的变化。

CSS3变形允许动态的控制元素,结合不同的变形函数产生复杂的动画效果,也可以结合CSS3的transition和动画的keyframe产生更加多变的动画效果。

下面例举了变形函数:

浏览器兼容性问题

虽然CSS3变形得到了主流浏览器较好地支持,但每个浏览器支持的程度不同,实际使用中要添加浏览器私有属性前缀。这里顺便就总结一下浏览器私有前缀。

浏览器私有前缀

待总结 #####1.2 CSS变形属性 1.2.1 transform属性

基本语法:transform: none

参数含义:none表示元素不变形,transform-function即变形函数

transform-function 表格列出变形函数

1.2.2 transform-origin属性

属性作用:指定元素中心点位置,即重置元素的原点。

基本语法:transform-origin: 参数略(可以是%、em、px等具体值,也可以是center等关键词)

注意点:旋转、缩放和倾斜变形可以按照重置原定进行,但平移变形始终按照元素中心点进行位移。

1.2.3 transform-style属性

基本语法:transform-style: flat preserve-3d

参数含义:flat表示所有子元素在2d平面呈现,preserve-3d则表示在3d空间呈现

1.2.4 perspective属性

属性作用:设置查看者的位置,将可视内容映射到一个视锥上,然后偷到一个2D视平面上

基本语法:perspective: none

参数说明:none表示无限视距,长度值越大,角度越远,长度值越小,越接近我们所看到得3D效果

此外,还有一个perspective()函数,它与perspective属性作用相同,区别在于perspective属性应用在变形元素的共同父元素上,而perspective()函数作用在当前元素。

用法

.box {
	perspective: 600px;
}
.box {
	transform: perspective(600px);
}

1.2.5 perspective-origin属性

属性作用:决定perspective属性的源点角度

1.2.5 backface-visibility属性

属性作用:决定元素旋转背面是否可见

基本语法:backfce-visibility: visible hidden

参数说明:visible表示背面可见,hidden表示背面不可见(扑克牌翻牌效果)

#####1.3 CSS3 2D变形

1.3.1 2D位移

基本语法:translate(tx,ty) translateX(tx) translateY(ty)

参数说明:tx表示x轴偏移量,ty表示y轴偏移量,x轴tx为正表示向右

1.3.2 2D缩放

基本语法:scale(sx,ts) scaleX(sx) scaleY(sy)

参数说明:使用方法跟translate相似

1.3.3 2D旋转

基本语法:rotate(a)

参数说明:a代表角度值,为正时相对元素中心顺时针旋转,为负时相对元素中心逆时针旋转,参数单位deg

1.3.4 2D倾斜

基本语法:skew(ax,ay) skewX(ax) skewY(ay)

参数说明:ax指定元素水平方向倾斜的角度,ay指定元素竖直方向倾斜的角度。

1.3.5 2D矩阵

基本语法:matrix(参数)

参数说明:以上的变形函数可以用matrix函数表示,具体用法略

#####1.4 CSS3 3D变形

1.4.1 3D位移

基本语法:translate(tx,ty,tz) translateZ(tz)

1.4.2 3D缩放

基本语法: scale(sx,sy,sz) scaleZ(sz)

1.4.3 3D旋转

基本语法: rotateX(a) rotateY(a) rotateZ(a)

1.4.4 3D矩阵

基本语法: 略

#####1.5 多重变形 多个变形函数之间用空格隔开

#####demo练习

待定

##CSS3 过渡

#####2.1 CSS3过渡简介

CSS3中得transition允许CSS元素值在一定的时间区间内平滑地过渡。

只要目标元素属性更改,浏览器就会应用过渡,除了使用js出发动作外,CSS中也可以通过一些伪类触发,比如::hober,:focus,:active,:target,:checked等。

使用CSS创建过渡的步骤:

  1. 在默认样式中声明元素的初始状态样式
  2. 声明过渡元素最终状态样式,比如悬浮样式
  3. 在默认样式中通过添加过渡函数,添加不同的样式

浏览器兼容性:跟CSS3变形一样实际使用时需要添加浏览器私有前缀

transition属性是一个复合属性,包含四个属性值transition-propertytransition-durationtransition-timing-functiontransition-delay

一般的属性设置顺序:

transition: all 1s ease-in-out .5s;

transition: 过渡属性 过渡所需时间 过渡动画函数 过渡延迟时间

#####2.2 属性详解

2.2.1 指定过渡属性transition-property

基本语法:transition-property: none all 指定样式

能够完成过渡的属性:具有过渡的中间值

  • 颜色属性
  • 具有长度值
  • integer
  • number浮点数值
  • 变形系列属性
  • rectangle
  • visiblity
  • 阴影
  • 渐变
  • SVG

2.2.2 指定过渡所需时间transition-duration

2.2.3 指定过渡函数transition-timing-function

参数:ease, linear, ease-in, ease-out, ease-in-out

三次贝瑟尔曲线:定义cubic-bezier(P0,P1,P2,P3)

transition-timing-function: cubic-bezier(.85,0,1,1)

step()函数:语法step(integer ,[start end]]) 第一个参数是一个数值,指定step()函数间隔的数量,第二个参数可选,默认为end

2.2.4 指定过渡延迟时间transition-delay

2.25 多个CSS3过渡效果

用逗号分隔要多度的各个CSS属性

#####2.3 CSS3触发过渡

2.3.1 为元素触发

:active, :focus, :checked

2.3.2 媒介查询触发

2.3.3 Js触发

tips:事件通常由js触发,简单动画和过渡用css触发

#####2.4 CSS3过渡技巧 未总结

##CSS3 动画 #####3.1 CSS3动画简介

CSS3通过animation实现动画和transition实现动画非常相似,都是通过改变元素的属性值实现动画效果,区别在于transition属性只能指定属性的初始状态和结束状态,然后在两个状态之间进行平滑地过渡。而animation实现动画效果主要由两部分组成:

  • 通过类似flash动画中的关键帧来声明一个动画
  • 在animation属性中调用关键帧声明的动画,从而实现更为复杂的动画效果

animation同transition一样是一个复合属性,animation具有8个子属性:

  1. animation-name: 指定一个关键帧动画的名字,必须对应一个@keyframe规则
  2. animation-duration: 设置动画播放所需时间,一般以秒为单位
  3. animation-timing-function: 设置动画的播放方式
  4. animation-delay: 指定动画开始时间,一般以秒为单位
  5. animation-iteration-count: 指定动画播放的循环次数
  6. animation-direction: 指定动画播放方向
  7. animation-play-state: 控制动画的播放状态
  8. animation-fill-mode: 设置动画时间外属性

多个动画属性应用到同一个元素上时用分号分隔开

#####3.2 关键帧

关键帧语法:

@keyframes animation-name {
	0%{
		/*css样式*/
	}
	50%{
		/*css样式*/
	}
	100%{
		/*css样式*/
	}
}

#####3.3 CSS中为元素应用动画

3.3.1 使用@keyframes声明动画

@keyframes wobble {
	0%{
		/*css样式*/
	}
	50%{
		/*css样式*/
	}
	100%{
		/*css样式*/
	}
}

3.3.2 调用@keyframes声明的动画

.demo{
	animation: wobble .2s ease-in;
}

#####CSS3动画子属性详解

  1. animation-name: 指定一个关键帧动画的名字,必须对应一个@keyframe规则
  2. animation-duration: 设置动画播放所需时间,一般以秒为单位
  3. animation-timing-function: 设置动画的播放方式
  4. animation-delay: 指定动画开始时间,一般以秒为单位
  5. animation-iteration-count: number infinite;
  6. animation-direction: normal alternate ;
  7. animation-play-state: running paused;
  8. animation-fill-mode: none forwards backwards both