css3循环动画-CSS3中的动画函数——过渡函数和动画函数

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

CSS3中的动画功能：在CSS3中，如果使用动画功能，可以使网页上的文本或图像更加动画css3循环动画，并且可以使背景颜色从一种颜色平滑过渡到另一种颜色。 转换函数支持从一种属性更改为另一种属性。 该值平滑为另一个属性值，动画功能支持通过关键帧的指定在页面上形成更复杂的动画效果。

1. 转换函数：

1、CSS3中的过渡可以让CSS属性值在一定的时间间隔内平滑过渡。 这些效果可以在鼠标点击、获得焦点、被点击或改变任何元素时触发，并平滑地改变 CSS 的动画效果属性值；

2、transition属性的使用方法：

过渡：句型；

-moz-transition：句型； /*火狐4*/

-webkit-transition：句型； /*Safari 和 Chrome*/

-o-transition：句型； /*歌剧*/

句型的取值：transition:propertydurationtiming-functiondelay;

3.transition主要包括四个属性值：

（1）执行变换的属性：transition:property； 该属性指定应用过渡效果的 CSS 属性名称（当指定的 CSS 属性发生变化时，过渡效果就会启动），值共有三种类型：

1）none没有属性，会得到过渡效果；

2）所有所有属性都会收到过渡效果；

3）property定义了应用过渡效果的CSS属性名称列表，该列表前面有一个冒号；

(2) 过渡持续时间：transition:duration； 指定完成过渡效果所需的时间（以秒或纳秒为单位）。 默认值为0，没有作用；

(3) 在延续期间，变换的速度发生变化：transition:timing-function; 可能的值：

1）ease：（逐渐减慢）默认值，ease函数相当于贝塞尔曲线（0.25,0.1,0.25,1.0）；

2）线性：（匀速），线性函数相当于贝塞尔曲线（0.0,0.0,1.0,1.0）；

3）ease-in：（加速），ease-in函数相当于贝塞尔曲线（0.42,0.1,0,1.0）；

4）ease-out：（减速），ease-out函数相当于贝塞尔曲线（0,0,0.58,1.0）；

5）ease-in-out：（加速后减速），ease-in-out功能相当于贝塞尔曲线（0.42,0,0.58,1.0）；

6）cubic-bezier(n,n,n,n)在cubic-bezier函数中定义了自己的值，可能的值是0到1之间的值；

(4) 可变延迟时间transition：delay； 用于指定动画开始执行的时间，也就是说改变元素的属性值后css3循环动画，需要多长时间开始执行转场的效果，它的值：是一个数值，并且单位是 s（秒）

或 ms（微秒）；

4、过渡函数的应用：

(1)HTML代码：

(2)CSS代码：

div{
	width: 200px;
	height: 200px;
	background-color: lightblue;
	
	transition: all 1s linear;
	-moz-transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	
	/*也可以将all直接写成对应的CSS样式名*/
	/*transition: background-color 1s linear;
	-moz-transition: background-color 1s linear;
	-webkit-transition: background-color 1s linear;
	-o-transition: background-color 1s linear;*/
	
	/*需要对多个CSS样式进行修改时*/
	/*transition: background-color 1s linear,width 1s linear,height 1s linear;
	-moz-transition: background-color 1s linear,width 1s linear,height 1s linear;
	-webkit-transition: background-color 1s linear,width 1s linear,height 1s linear;
	-o-transition: background-color 1s linear,width 1s linear,height 1s linear;*/
	
	/*cubic-bezier函数使用*/
	/*transition: all 1s cubic-bezier(0,0.5,0,0.5);
	-moz-transition: all 1s cubic-bezier(0,0.5,0,0.5);
	-webkit-transition: all 1s cubic-bezier(0,0.5,0,0.5);
	-o-transition: all 1s cubic-bezier(0,0.5,0,0.5);*/
	
	/*鼠标放上去1s后发生属性值的变化*/
	/*transition: all 1s linear 1s;
	-moz-transition: all 1s linear 1s;
	-webkit-transition: all 1s linear 1s;
	-o-transition: all 1s linear 1s;*/
}
div:hover{
	width: 400px;
	height: 400px;
	background-color: #FA8072;
}

(3)疗效图如下：

1）键盘未竖起时的疗效图：

2）键盘搭起进行功能平滑后的效果图：

二、动画功能：

1、CSS3中除了使用transition来实现动画效果之外，还可以使用animation来实现动画效果；

2、使用transition和animations的区别：transition只能通过指定属性的起始值和结束值，然后在两个属性之间平滑过渡来实现动画的效果，所以无法实现transition

复杂的动画效果，而动画功能就是通过关键帧以及每个关键帧中的属性值来实现更复杂的动画效果；

3. 动画使用方法：

@-webkit-keyframes 关键帧编译名称 {创建关键帧的代码}

0%~100%{该关键帧的样式}

创建关键帧后，关键帧应在元素的样式中使用，如下所示：

元素{

-webkit-动画名称：mycolor；

-webkit动画持续时间：0.5秒；

-webkit-animation-timing-function：线性；

-webkit-animation-iteration-count：无限；

其中，-webkit-animation-name指定编译的名称； -webkit-animation-duration 整个动画完成所需的时间； -webkit-animation-timing-function 实现动画技巧； -webkit-animation-iteration-count属性 属性值设置为整数值，因此动画播放的次数就等于这个整数值（infinite是无限循环播放）

4.动画的实现方式：

(1)线性：从开始到结束以相同的速率进行；

(2)缓入：起步速度很慢，然后沿着曲线推进；

(3)缓出：起步速度很快，然后沿曲线减速；

(4)缓和：一开始速度很快，然后沿弯道减速，然后沿弯道加速；

（5）ease-in-out：一开始速度很慢，然后沿曲线加速，然后沿曲线减速；

5.动画功能的应用：

(1)animations函数实现圆形背景色不同层次的颜色渐变：

1）HTML代码：

2）CSS代码：

@-webkit-keyframes boxColor{
	0%{
		background-color: lightgreen;
	}
	10%{
		background-color: lightblue;
	}
	20%{
		background-color: lightcoral;
	}
	80%{
		background-color: lightsalmon;
	}
	100%{
		background-color: lightgreen;
	}
}
div:hover{
	-webkit-animation-name: boxColor;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
div{
	width: 200px;
	height: 100px;
	background-color: lightgreen;
}

3）疗效图如下：

①鼠标不放时的疗效图：

②鼠标放上去后背景平滑变化过程中的效果图：

(2)animations函数实现进度条背景色不同层次的颜色渐变：

1）HTML代码：

2）CSS代码：

@-webkit-keyframes boxColor{
	0%{
		background-color: lightgreen;
	}
	10%{
		width: 100px;
		background-color: lightblue;
	}
	20%{
		width: 200px;
		background-color: lightcoral;
	}
	80%{
		width: 300px;
		background-color: lightsalmon;
	}
	100%{
		width: 400px;
		background-color: lightgreen;
	}
}
div:hover{
	-webkit-animation-name: boxColor;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
div{
	width: 10px;
	height: 20px;
	background-color: lightgreen;
}

3）疗效图如下：

①鼠标不放时的疗效图：

②当鼠标放上时，进度条在背景颜色渐变的过程中实现治疗效果图：