CSS3中的动画功能-transition功能与animations功能

最新推荐文章于 2022-03-08 18:17:59 发布

Z_ikCoffee

最新推荐文章于 2022-03-08 18:17:59 发布

阅读量1.6k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/z983002710/article/details/76407757

版权

CSS3中的动画功能：在CSS3中，如果使用动画功能可以使网页上文字或者图像更具有动画效果，可以使背景颜色从一种颜色平滑过渡到另外一种颜色，transition功能支持从一个属性值平滑到另外一个属性值，animations功能支持通过关键帧的指定来在页面产生更复杂的动画效果。

一、transition功能：

1、CSS3中transition允许CSS的属性值在一定的时间区间内平滑的过渡，这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS的属性值；

2、transition属性的使用方法：

transition:语法;
-moz-transition:语法; /*Firefox4*/
-webkit-transition:语法; /*Safari和chrome*/
-o-transition:语法; /*Opera*/
其中语法取值：transition:property duration timing-function delay;

3、transition主要包含四个属性值：

（1）执行变换的属性：transition:property;属性规定应用过渡效果的CSS属性的名称(当指定的CSS属性发生改变时，过渡效果将开始)值有三个类型：

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

2）all所有属性都将获得过渡效果；

3）property定义应用过渡效果的CSS属性名称列表，列表以逗号；

（2）变换延续的时间：transition:duration;规定完成过渡效果需要花费的时间(以秒或者毫秒计)，默认值0没有效果；

（3）在延续时间段，变换的速率变化：transition:timing-function;可能的取值：
1）ease：(逐渐变慢)默认值，ease函数等同于贝塞尔曲线(0.25,0.1,0.25,1.0);
2）linear：(匀速)，linear函数等同于贝塞尔曲线(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;用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s(秒)

或者ms(毫秒)；

4、transition功能的应用：

（1）HTML代码：

<div></div>

（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）鼠标放上去执行函数平滑后的效果图：

二、animations功能：

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

2、使用transition与animations的区别：transition只能通过指定属性的开始值与结束值，然后通过两个属性之间进行平滑过渡的方式来实现动画效果，所以transition不能实现

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

3、animations的使用方法：

@-webkit-keyframes关键帧合集名称{创建关键帧的代码}
0%~100%{本关键帧中的样式}
关键帧创建好了之后，还要在元素的样式中使用该关键帧，方法如下：
元素{
-webkit-animation-name:mycolor;
-webkit-animation-duration:.5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}

其中-webkit-animation-name指定合集名称；-webkit-animation-duration整个动画执行完成所需要的时间；-webkit-animation-timing-function实现动画的方法；-webkit-animation-iteration-count属性的属性值设定为某个整数值，那么这个动画播放的次数就等于这个整数值(infinite是无限循环播放)

4、实现动画的方法：

（1）linear：从开始到结束都是以同样的速度进行；

（2）ease-in：开始速度很慢，然后沿着曲线进行加快；

（3）ease-out：开始速度很快，然后沿着曲线进行减速；

（4）ease：开始时速度很快，然后沿着曲线进行减速，然后再沿着曲线加速；

（5）ease-in-out：开始时速度很慢，然后沿着曲线进行加速，然后再沿着曲线减速；

5、animations功能的应用：

（1）animations功能实现矩形背景颜色不同层次的颜色渐变：

1）HTML代码：

<div></div>

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代码：

<div></div>

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）效果图如下：

①鼠标未放上去的效果图：