CSS3 过渡 变形 动画

CSS3变形

一、相关属性

1.tranform

• 设置或检索对象的转换

• none：(默认值)无转换

• 2D转换功能

  • matrix():
    • 以一个含六值的（a,b,c,d,e,f）变换矩阵的形式指定一个2D变换。相当于直接应用一个[a,b,c,d,e,f]变换矩阵
  • translate():
    • 指定对象的2D translation(2D平移)。第一个参数对于X轴，第二个参数对于Y轴。如果第二个参数未提供，则默认值为0
  • translatex():
    • 指定对象X轴的平移
  • translatey():
    • 指定对象Y轴的平移
  • rotate():
    • 指定对象的2D rotation(2D旋转),需先有<transform-origin>属性的定义
  • scale():
    • 指定对象的2D scale(2D缩放)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。
  • scalex():
    • 指定对象X轴的（水平方向）缩放
  • scaley():
    • 指定对象Y轴的（垂直方向）缩放
  • skew():
    • 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴，第二个参数对应Y轴。如果Y没提供，则默认值为0
  • skewx():
    • 指定对象X轴的（水平方向）扭曲
  • skewy():

    • 指定对象Y轴的（垂直方向）扭曲

        例如：transform写多个功能用空格分开
        transform:translate(50px,-150px) skew(-45deg) scaley(.5);
      

• 3D转换功能

    需要给`父元素`设置以下三个前提条件：
                1.transform-style:preserve-3d;
    			2.perspective: 300px;
    			3.perspective-origin: left top;
  

  • matrix3d():
    • 以一个4x4矩阵的形式指定一个3D变换
  • translate3d():
    • 3D位移，X轴、Y轴、Z轴
  • translatez():
    • 指定对象Z轴的平移
  • rotate3d():
    • 3D旋转角度，前三个值表示旋转方向X、Y、Z，第四个参数表示旋转的角度，参数不允许省略。
  • rotatex():
    • 指定对象在X轴上的旋转角度
  • rotatey():
    • 指定对象在Y轴上的旋转角度
  • rotatez():
    • 指定对象在Z轴上的旋转角度
  • scale3d():
    • 3D缩放。三个值X、Y、Z参数对于的，参数不允许省略。
  • scalez():
    • 指定对象的Z轴缩放
  • perspective():

    • 指定透视距离

        例如：
        .box03:hover{
        			transform:rotatex(45deg) scalez(50);
        		}
      

2.transform-origin

• 设置或检索对象以某个原点进行转换

• 用法：

  • 如果提供两个值，第一个用于横坐标，第二个用于纵坐标
  • 如果提供一个，该值将用于横坐标；纵坐标将默认为50%
  • 3D变形需要指定Z坐标 第三个参数

• 取值：

  • X轴：left/right/center/length(长度值)/percentage(百分比)

  • Y轴：top/bottom/center/length(长度值)/percentage(百分比)

      例：
      .box-rotate:hover{
      				transform:rotate(45deg);
      				}
      .box-scale:hover{
      				transform:scale(.8);
      				}
      .box-skew:hover{
      				transform:skew(10deg,10deg);
      			   }
    
      .box01{
      	 transform-origin:center center;
            }
      .box02{
           transform-origin:left top;
         }
    

3.transform-style

• 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
• 取值：
  • flat:默认值，指定子元素位于此元素所在平面内
  • preserve-3d:指定子元素定位在三维空间内

4.perspective

• 指定观察者与[z=0]平面的距离，使具有三维位置变换的元素产生透视效果。[z>0]的三维元素比正常大，而[z<0]时则比正常小，大小程度由该属性的值决定。
• 取值：
  • none:不指定透视
  • length:指定观察者距离[z=0]平面的距离，为元素及其内容应用透视转换。不允许负值。

5.perspective-origin

• 设置头试点的位置
• 取值
  • 如果提供两个，第一个是横坐标，第二个是纵坐标
  • 如果提供一个，该值作用于横坐标；纵坐标将默认为center
  • X轴：left/right/center/length(长度值)/percentage(百分比)
  • Y轴：top/bottom/center/length(长度值)/percentage(百分比)

6.backface-visibility

• 指定元素背面面向用户是否可见
• 需要直接在该元素上定义该属性，因为该属性默认为不可继承
• 取值：
  • visible:默认，指定元素背面可见，允许显示正面的镜像
  • hidden:指定元素背面不可见

二、CSS3 2D变形

1.2D位移

• translate(x,y)
• translatex()
• translatey()

2.2D缩放

• scale(x,y)
• scalex()
• scaley()

3.2D旋转

• rotate（deg）

4.2D倾斜

• skew(x,y)
• skewx()
• skewy()

5.2D矩阵

• matrix()

三、CSS3 3D变形

1.3D位移

• translate3d(x,y,z)
• translatez()

2.3D缩放

• scale3d(x,y)
• scalez()

3.3D旋转

• rotate3d（x,y,z,a）
• rotatex()
• rotatey()
• rotatez()

4.3D矩阵

• matrix3d()

四、CSS3 多重变形

CSS3过渡

一、过渡属性

1.transition

• 检索或设置对象变换时的过渡

• 注意：

  • 提供一个值时，为transition-duration的值
  • 提供两个值时，第一个为transition-duration的值，第二个为transition-delay的值

• 用法：

    transition：all      .5s     ease-in-out       1s;
    		 过渡属性   过渡时间   过渡动画（速度）  拖延时间
  

2.transition-property

• 设置参与过渡的属性

  • 默认为all。所有可以过渡的属性都可以进行过渡
  • 如果提供多个属性值，以逗号隔开

• 取值：

  • none：不指定过渡的css属性
  • all:所有可以进行过渡的css属性
  • 单独指定要进行过渡的css属性

• 哪些属性可以过渡

  • 颜色属性
  • 具有长度值，百分比的属性
  • 值是数字的属性，如z-index opacity outline-offset等
  • 变形系列属性
  • 阴影
  • 渐变

3.transition-duration

• 设置过渡的持续时间
• 如果提供多个值，以逗号进行分隔

4.transition-timing-function

• 设置过渡的动画类型
• 取值：
  • ease:平滑过渡
  • linear:线性过渡
  • ease-in:由慢到快
  • ease-out：由快到慢
  • ease-in-out:由慢到快再到慢
  • cubic-bezier(数字，数字，数字，数字)四个值需在[0,1]区间内
  • steps([[start|end]]?):接受两个参数的步进函数。
    • 第一个参数必须为正整数，指定函数的步数
    • 第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个是可选，默认为end

5.transition-delay

• 设置对象延迟过渡的时间

    例如：
    综合设置属性all:
    transition:all ease 1s 5s;
    单独设置某个属性：
    transition: width ease 1s 1s,
    			height ease 1s 1s;
  

二、CSS3触发过程

1.伪元素触发

2.媒体查询

3.JavaScript触发

CSS3动画

一、关键帧

• 帧——就是动画中最小单元的单幅影像画面，相对于电影胶片上的每一格镜头

二、关键帧语法

1.例题:
@keyframes tongzhi{
			0%{
				color:red;
			}
			20%{
				color:orange;
			}
			40%{
				color:yellow;
			}
			60%{
				color:green;
			}
			80%{
				color:cyan;
			}
			100%{
				color:purple;
			}
		}
h1:hover{
			animation:tongzhi 3s;
			
		}
2.例题
@keyframes mymation{
		from{
			margin-left:0px;
		}

		to{
			margin-left:600px;
		}
	}
.box{
		100px;
		height:100px;
		background:red;
		animation:mymation 5s;
	}

三、动画属性

1.animation

• 设置对象所应用的动画特效
• 如果提供多组属性值，以逗号进行分隔
• 注意：
  • 只提供一个值为animation-duration
  • 两个值：第一个为animation-duration，第二个为animation-delay

2.animation-name

• 设置对象所应用的动画名称
• 必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

3.animation-duration

• 设置对象动画的持续时间

4.animation-timing-function

• 设置对象动画的过渡类型
• 值：
  • ease： (默认)平滑过渡。
  • linear： 线性过渡。
  • ease-in： 由慢到快。
  • ease-out： 由快到慢。
  • ease-in-out： 由慢到快再到慢。
  • step-start： 等同于 steps(1, start)
  • step-end： 等同于 steps(1, end)
  • steps([, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
  • cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

5.animation-delay

• 指定对象动画的延迟时间

6.animation-iteration-count

• 指定动画的具体循环次数
• 值：
  • number:数字表示循环次数
  • infinite：无限循环

7.animation-direction

• 设置对象动画在循环中是否反向运动
• 值：
  • normal： 正常方向 (默认)
  • reverse： 反方向运行
  • alternate： 动画先正常运行再反方向运行，并持续交替运行
  • alternate-reverse： 动画先反运行再正方向运行，并持续交替运行

8.animation-play-state

• 设置对象动画的状态
  • running： 运动 (默认)
  • paused： 暂停

9.animaton-fill-mode

• 设置对象动画时间之外的状态
  • none：默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
  • forwards： 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
  • backwards：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
  • both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 子主题 2