HTML学习笔记（9）-CSS3动画

1. CSS3动画

使用css3的动画能够通过原生的css实现页面动态效果。老旧的浏览器不支持CSS3的大部分属性。

1.2 变形

变形由一些列的函数构成。

transform:函数();

1.2.1变形函数

• translate: 平移
• scale： 缩放
• rotate：旋转
• skew：倾斜

不同函数使用之后的效果是不同的。

平移

translateX(x) /*仅横向平移*/
translateY(y) /*仅纵向平移*/
translate(x,y); /*第一个参数控制x轴，第二个参数控制y轴*/

缩放

scaleX(x) /*仅横向缩放，元素默认大小为1，  1.5放大1.5倍。   0.5，缩小0.5倍*/
scaleY(y) /*仅纵向缩放，原始大小1， 1.5放大，   0.8 缩小*/
scale(xy) /*x和y轴同时进行等比缩放，原始大小1，   1.2 x和y都放大1.2*/

旋转

rotate(0deg); /*旋转0度*/
rotate(45deg); /*顺时针旋转45deg*/
rotate(-45deg); /*逆时针旋转45deg*/

倾斜

倾斜函数会改变元素的形状。

skewX(0deg); /*X轴倾斜0deg*/
skewY(0deg); /*Y轴倾斜0deg*/
skew(x,y);

z-index:控制绝对定位的元素在立体层面的堆叠次序。

1.3 过渡

使动作变得平滑，就像发动机加了机油一样感觉。

transition:属性 持续时间 过渡函数 延迟时间;
/*
属性：当哪个动作发生改变时才会触发过渡，默认all
持续时间： 过渡持续时间 
过渡函数： 
		ease	慢速开始-匀速-慢速结束
		linear  匀速
		ease-in 慢速开始-匀速结束
		ease-out	匀速开始-慢速结束
		ease-in-out	慢速开始-匀速-慢速结束
		steps(4, end)	将动画划分4步执行	
		https://cubic-bezier.com/#.94,.36,.56,.78  贝塞尔曲线
延迟时间：默认为0，过渡会在延迟时间到达以后才会开始
*/

1.4 动画

每个动画由多个关键帧组成。关键帧的开始由from表示，等价于0%,动画的最后一帧由to表示
等价于100%。可以通过指定百分比定义多个帧。

@keyframes 关键帧名称{
	0%{  /*from{}*/
		/*动画在第一帧*/
	}
	
	20%{}
	
	100%{ /*to{}*/
		/*动画的最后一帧*/
	}
}

1.4.1使用关键帧

搭配css3动画属性animation。

/*缩写形式*/
animation:animation-name  animation–duration  animation-timing-function
   animation-delay  animation-iteration-count  animation-direction  
animation-play-state  animation-fill-mode;

属性	作用
animation-name	执行的关键帧名称
animation–duration	动画执行时间
animation-timing-function	动画执行的平滑函数，可以使用贝塞尔曲线公式
animation-delay	动画延迟执行时间
animation-iteration-count	动画执行次数，默认为1，infinite 无限次执行
animation-direction	动画播放方向，alternate
animation-play-state	动画播放状态，由paused暂停和running运行组成
animation-fill-mode	动画结束时的停留的关键帧

animation-direction:alternate; /*动画关键帧执行到100%时，才100%回到0%*/
animation-direction:normal; /*动画关键帧执行到100%时，再次从0%开始执行动画*/
animation-direction: reverse; /*动画从100%执行到0%*/

animation-fill-mode:backwards; /*默认值，动画完成后，回到第一帧（0%）*/
animation-fill-mode:forwards; /*动画完成后,停留在最后一帧（100%）*/