CSS3新特性详解(四):CSS3过度transition和动画animation @keyframes规则详解

  继上篇“CSS3新特性详解(三):CSS3 2D转换和3D转换 transform 变形使用详解 ”后,本文继续CSS3剩余部分:CSS3的过渡transition和动画animation属性。曾几何时我们要在页面上实现动画只能:

  • 做个flash动画或gif图片;
  • js动画,比如要实现元素水平位移动画,可以搞个定时器,元素的left从 -1000px 开始每隔 200ms 增加 100px。

  现如今,我们只要使用CSS3的transition、animation属性及@keyframes定义,就可以轻松实现元素的动画效果。下面让我们一起看下transition、animation属性的使用详解。

一、transition 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。语法定义上transition有两种实现方式:

  • 使用transition简写属性
  • 使用transition-property、transition-duration、transition-timing-function和transition-delay组合属性。

1、transition简写属性

语法: transition: property duration timing-function delay;
参数说明:

  • property:none|all|css属性,如height,width等;
  • duration:过渡时长,可以是秒或毫秒,1s表示1秒,500ms表示500毫秒;
  • timing-function:时间曲线函数,如:linear,ease,ease-in等;
  • delay:延迟时间,1s表示1秒后进行过渡动画。

案例:

transition: margin-right 2s; /* 过渡效果作用在margin-right属性上,持续2秒 */
transition: margin-right 2s .5s;  /* 变换效果延迟0.5秒执行 */
transition: margin-right 2s ease-in-out; /* 变换效果时间曲线函数采用 ease-in-out */
transition: margin-right 2s ease-in-out .5s; /* 变换效果时长2秒,时间曲线函数ease-in-out,延迟0.5秒执行 */
transition: margin-right 2s, color 1s; /*多个属性变换效果用 逗号 分隔*/
transition: all 1s ease-out; /*所有属性都有变换效果,持续1秒*/

2、使用transition-property、transition-duration、transition-timing-function和transition-delay组合属性

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

变换效果在width属性上,效果时长1秒,时间曲线函数为linear,延迟2秒执行。

1)transition-property,应用过渡的 CSS 属性的名称

语法: transition-property: none|all| property; 默认值all

  • none,没有属性会获得过渡效果;
  • all,所有属性都将获得过渡效果;
  • property,定义应用过渡效果的 CSS 属性名称,多个属性以逗号分隔。
2)transition-duration,完成过渡效果需要花费的时间

语法: transition-duration: time;
说明: 完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,表示没有动画效果。

3)transition-timing-function 过渡效果的时间曲线函数

语法: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); 默认值ease
各曲线函数说明:

  • linear,匀速变换(等于 cubic-bezier(0,0,1,1))。
  • ease,慢–快--慢过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
  • ease-in,以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
  • ease-out 以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
  • ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
4)transition-delay 动画延迟,指定何时开始过渡效果

语法: transition-delay: time;
说明: transition-delay值以秒为单位(S)或毫秒(ms),默认值0,没有延迟。

3、transition 过渡动画生效的2个必要参数

  • transition-property 不能是none,可以不设置(默认all)
  • transition-duration 必须设置,因为其默认值是0

transition案例,请参考本文最后案例代码部分。

二、animation 动画

方便理解,先看个简单的案例:

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div:hover {animation: myfirst 2s}

div鼠标移上去会有背景色从红色渐变到黄色的动画过渡效果,持续2秒。我们可以看出,要实现animation 动画效果,需要2步:

  • 定义@keyframes 规则
  • 使用animation属性,animation可以采用简写方式,也可以采用animation-name、animation-duration等复合方式。

1、@keyframes 规则定义

@keyframes规则定义了动画是怎么动的,如上文的背景色变换,假设我们定义的是top属性变动则可以实现元素上下运动等。

语法:@keyframes animationname {keyframes-selector {css-styles;}}

描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。合法的值:
0-100%
from(与 0% 相同)
to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。

一个案例:

@keyframes myfirst{
	0%   {background: red; left:0px; top:0px;}
	25%  {background: yellow; left:200px; top:0px;}
	50%  {background: blue; left:200px; top:200px;}
	75%  {background: green; left:0px; top:200px;}
	100% {background: red; left:0px; top:0px;}
}
div:hover{animation: myfirst 4s;}

案例说明,这个动画时长4s:

  • 0% 动画开始,background: red; left:0px; top:0px;
  • 25% 动画进行到4s*25% = 1s,background: yellow; left:200px; top:0px;
  • 50% 动画进行到4s*50% = 2s,background: blue; left:200px; top:200px;
  • 75% 动画进行到4s*75% = 3s,background: green; left:0px; top:200px;
  • 100% 动画结束,background: red; left:0px; top:0px;

2、animation 属性详解

从语法定义上来说,实现animation动画,有2种方式:

  • animation:简写方式,除了 animation-play-state 属性,其它属性都可以实现
  • animation-name,animation-duration等组合方式

2.1 animation 简写方式

语法: animation: name duration timing-function delay iteration-count direction;

说明: 默认值为:none 0 ease 0 1 normal;

  • name必须指定,否则没有动画效果;
  • duration必须指定,其默认值是0;
  • 简写方式不能设置animation-play-state属性。

一个案例:

animation:mymove 5s infinite; /* 动画无限播放 */
animation:mymove 5s 3; /* 动画播放3次 */
animation:mymove 5s 3 alternate; /* 1,3次正向播放;第2次反向播放 */

2.2 animation-* 复合方式

animation-name:mymove;
animation-duration:5s;

类似上述css,每项animation-*单独设置,我们称之为复合方式,常用的共有6个属性,具体如下:

1)animation-name, 需要绑定到选择器的 keyframe 名称

  • 语法: animation-name: keyframename|none;
  • 说明: keyframename @keyframes 名称,默认值“none”,参数必须指定,none表示无动画效果

2)animation-duration,动画时长

  • 语法: animation-duration: time;
  • 说明: 定义动画完成一个周期所需要的时间,以秒或毫秒计,默认值"0",参数必须指定,0表示无动画效果

3)animation-timing-function,时间曲线(速度)函数

  • 语法: animation-timing-function: value;
  • 说明: 可选参数,默认值“ease”,其值可以是linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),同transition-timing-function

4)animation-delay,动画开始前等待的时间

  • 语法: animation-delay: time;
  • 说明: 可选参数,定义动画开始前等待的时间,以秒或毫秒计。默认值是 0

5)animation-iteration-count,动画播放循环次数

  • 语法: animation-iteration-count: n|infinite;
  • 说明: n定义动画播放次数的数值,infinte表示无限次播放,默认值为1,只播放一次

6)animation-direction,动画是否应该轮流反向播放

  • 语法: animation-direction: normal|alternate;
  • 说明: normal默认值,正常播放;alternate表示动画应该轮流反向播放,会在奇数次数(1、3、5 等)正常播放,而在偶数次数(2、4、6 等)反向播放;需要注意的是animation-iteration-count为1,animation-direction无效
animation-name: myfirst;
animation-duration: 4s;
animation-iteration-count: 5;
animation-direction: alternate

动画@keyframs name为myfirst;完成一个周期所需时间为4妙;播放次数5次;第1,3,5次正向播放,第2,4次反向播放。

三、一个完整的DEMO

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3-过渡和动画</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style> 
.table {margin-top: 60px}
.transition_box .box{position: relative; width: 100px; height: 80px; background: #e4f0f5; text-align: center; line-height: 80px;}
.transition_box .box:hover {background: #909; color: #fff; width: 150px}

@keyframes myfirst{
	0%   {background: #e4f0f5; left:0px; top:0px;}
	25%  {background: yellow; left:200px; top:0px;}
	50%  {background: blue; left:200px; top:120px;}
	75%  {background: green; left:0px; top:120px;}
	100% {background: red; left:0px; top:0px;}
}
.animation_box .box{position: relative; width: 300px; height: 200px;}
.animation_box .rect{background: #e4f0f5; position: absolute; width: 100px; height: 80px; left: 0; top: 0; text-align: center; line-height: 80px;}
</style>
</head>

<body>
	<div class="container">
<table class='table table-bordered transition_box'>
	<tr>
		<td>
			<div class="box" style="transition:width 2s">Box1</div>
		</td>
		<td>
			<div class="box" style="transition:width 2s .5s">Box2</div>
		</td>
		<td>
			<div class="box" style="transition:width 2s ease-in-out">Box3</div>
		</td>
		<td>
			<div class="box" style="transition:all 2s ease-out">Box4</div>
		</td>
	</tr>
	<tr>
		<td>transition:width 2s</td>
		<td>transition:width 2s .5s</td>
		<td>width 2s ease-in-out</td>
		<td>transition:all 2s ease-out</td>
	</tr>
</table>
<table class='table table-bordered transition_box'>
	<tr>
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s">Box1</div>
		</td>
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s; transition-delay:0.5s">Box2</div>
		</td>		
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s;transition-timing-function:ease-in-out">Box3</div>
		</td>
		<td>
			<div class="box" style="transition-duration:2s; transition-timing-function:ease-out">Box4</div>
		</td>
	</tr>
	<tr>
		<td>transition-property:width<br>transition-duration:2s</td>
		<td>transition-property:width<br>transition-duration:2s<br>transition-delay:0.5s</td>
		<td>transition-property:width; <br>transition-duration:2s<br>transition-timing-function:ease-in-out</td>
		<td>transition-duration:2s;<br>transition-timing-function:ease-out</td>
	</tr>
</table>
<table class='table table-bordered animation_box'>
	<tr>
		<td>
			<div class="box box1"><div class='rect' style="animation: myfirst 4s">Box1</div></div>
		</td>
		<td>
			<div class="box"><div class="rect" style="animation: myfirst 4s infinite">Box2</div></div>
		</td>		
		<td>
			<div class="box"><div class="rect" style="animation: myfirst 4s 5 alternate">Box2</div></div>
		</td>
	</tr>
	<tr>
		<td>animation: myfirst 4s</td>
		<td>animation: myfirst 4s infinte</td>
		<td>animation: myfirst 4s 5 alternate</td>
	</tr>
</table>

<table class='table table-bordered animation_box'>
	<tr>
		<td>
			<div class="box box1"><div class='rect' style="animation-name: myfirst;animation-duration:4s">Box1</div></div>
		</td>
		<td>
			<div class="box"><div class="rect" style="animation-name: myfirst;animation-duration:4s;animation-iteration-count:infinite">Box2</div></div>
		</td>		
		<td>
			<div class="box"><div class="rect" style="animation-name: myfirst;animation-duration:4s;animation-iteration-count:5;animation-direction:alternate">Box3</div></div>
		</td>
	</tr>
	<tr>
		<td>animation-name: myfirst;<br>animation-duration:4s</td>
		<td>animation-name: myfirst;<br>animation-duration:4s<br>animation-iteration-count:infinite</td>
		<td>animation-name: myfirst;<br>animation-duration:4s<br>animation-iteration-count:infinite<br>animation-direction:alternate</td>
	</tr>
</table>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页