CSS3动画效果详解

CSS3动画

在CSS3中,animation属性用于实现元素的动画。

animation属性跟transition属性在功能实现上是非常相似的,都是通过改变元素的属性值来实现动画效果。但是,这两者实际上有着本质的区别

  • 对于transition属性来说,它只能将元素的某一个属性从一个属性值过渡到另一个属性值
  • 对于animation属性来说,它可以将元素的某一个属性从第1个属性值过渡到第2个属性值,然后还可以继续过渡到第3个属性值,以此类推。

从以上推断出:transition属性(即CSS3过渡)只能实现一次性的动画效果,而animation属性(即CSS3动画)可以实现连续性的动画效果。

CSS3中的animation属性就是为了解决这些问题而提出的。animation属性可以通过控制关键帧来控制动画的每一步,从而实现更为复杂的动画效果。

使用animation属性实现CSS3动画需要两步

  • 定义动画:用@keyframes规则来定义动画的样式
  • 调用动画:用animation属性来调用@keyframes规则定义的动画

使用@keyframes规则创建动画

概念:在CSS3中,使用@keyframes规则来创建动画。创建动画是指从一个CSS样式到另一个CSS样式逐步变化而产生动画效果的过程。在创建动画中,可以多次更改CSS样式的设定。

一个动画由很多画面组成,每一个画面叫做一帧。其中,角色或者物体运动变化的关键动作所处的帧叫做关键帧。创建动画必须定义关键帧。

语法:

css 复制代码
@keyframes animation_name{
    keyframes-selector{css-styles;}
}

属性值说明

属性值 说明
animation 当前动画的名称,它将作为引用该动画时的唯一标识,因此不能为空
keyframes-selector 关键帧选择器,指定当前关键帧在整个动画过程中的位置,其值可以是from和to,或者百分比。其中,from和0%效果相同(表示动画的开始),to和100%效果相同(表示动画的结束)
css-style 定义执行到当前关键帧时对应的动画状态,由CSS样式属性进行定义,多个属性之间用分号(;)分隔,且属性不能为空。

实例:仅定义开头和结尾

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>@keyframes创建动画</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			div{
				width:200px;
				height:150px;
				margin:20px auto;
				border-radius:20px;
				background-color:blueviolet;
			}
			/* 定义动画 */
			@keyframes colorChange{
				0%{
					background-color:blueviolet;
				}
				100%{
					background-color:greenyellow;
				}
			}
			/* 调用动画,这里可以先看后面 */
			div:hover{
				animation:colorChange 2s linear 0s 5 normal;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
	</body>
</html>

运行结果

实例:定义多个关键帧

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>@keyframes创建动画</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			div{
				width:200px;
				height:150px;
				margin:20px auto;
				border-radius:50%;
				background-color:darkblue;
				cursor:pointer;
			}
			/* 定义动画 */
			@keyframes colorChange{
				0%{
					background-color:darkblue;
				}
				25%{
					background:radial-gradient(circle at top,orange 20%,yellow 40%);
				}
				50%{
					background:radial-gradient(circle at center,orange 20%,yellow 40%);
				}
				75%{
					background:radial-gradient(circle at bottom,orange 20%,yellow 40%);
				}
				100%{
					background-color:red;
				}
			}
			/* 调用动画 */
			div:hover{
				animation:colorChange 5s linear;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
	</body>
</html>

运行结果

@keyframes其中的百分比是"持续时间"。在实例:定义多个关键帧中,定义持续时间为5s,则0%指的是0s时,25%指的是1.25s,50%指的是2.5s,75%指的是3.75s,100%指的是5s.

使用animation属性调用动画

概念:CSS3中的animation属性用于调用由@keyframes规则创建的动画。

animation属性是一个复合属性,主要包括6个子属性。

属性值 说明
animation-name 对于指定CSS属性进行进行操作
animation-duration 动画的持续时间
animation-timing-function 动画的速率变化方式
animation-delay 动画的延迟时间
animation-iteration-count 动画的播放次数
animation-direction 动画的播放方向,正向还是反向

动画名称:animation-name

概念:animation-name属性用于定义要调用的由@keyframes规则创建的动画名称。调用多个动画名称要以逗号隔开。

语法:

css 复制代码
anination-name:keyframename|none;

属性值

属性值 说明
none 默认值,表示不应用任何动画,该设置也可以用于取消动画
keyframename 用于定义要调用的动画名称。多个动画名称以英文逗号隔开

animation-name调用的动画名需要和@keyframes规则定义的动画名完全一致(区分大小写),如果不一致将不会产生任何动画效果。

注意:在animation属性上指定多个以逗号分隔的值时,它们会将根据值的数量以不同的方式分配给animation-name属性指定的动画。

持续时间:animation-duration

概念:animation-duration属性用于定义完成一个动画周期所需要的时间。

语法:

css 复制代码
animation-duration:time;

属性值

属性值 说明
time 它表示以秒(s)或毫秒(ms)为单位的时间。默认值为0,表示没有任何动画效果。当该参数的值为负数时,则被视为0。

动画方式:animation-timing-function

概念:animation-timing-function属性用来定义动画的速度曲线。"速度曲线",指的是动画执行过程中的速度变化情况。

语法:

css 复制代码
animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值

属性值 说明 速率
linear 规定以相同速度开始至结束的过渡效果,即"匀速"
ease 默认值,规定慢速开始,变快之后慢速结束的过渡效果
ease-in 规定速度越来越快的过渡效果
ease-out 规定速度越来越慢的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n.n,n,n) 在cubic-bezier函数中自定义值,参数是0~1的数值

说明:animation-timing-function属性取值跟CSS3过渡的transition-timing-function是一样的

延迟时间:animation-delay

概念:animation-delay属性用来定义执行动画之前等待的时间,即指的是规定动画什么时候开始

语法:

css 复制代码
animation-delay:time;

属性值

属性值 说明
time 它表示以秒(s)或毫秒(ms)为单位的时间。默认值为0,表示不延迟(不等待)

播放次数:animation-iteration-count

概念:animation-iteration-count属性用来定义动画的播放次数

语法:

css 复制代码
animation-iteration-count:number|infinite;

属性值

属性值 说明
number 表示动画重复的次数。默认值为1,即指的是动画默认只播放1次。若属性值为一个整数,则规定动画播放次数。若属性值为一个非整数值,则表示播放动画循环的一部分。例如,0.5s将动画只播放一半。负值是无效的。
infinite 表示动画无限次循环播放

说明:animation-iteration-count属性可以指定一个或多个以逗号分隔的值

播放方向:animation-direction

概念:animation-direction属性用来定义动画的播放方向。

语法:

css 复制代码
animation-direction:normal|alternate;

属性值

属性值 说明
normal 默认值,表示动画每次都顺向播放
reverse 表示动画每次都反方向播放
alternate 表示动画会在奇数次(1次,3次,5次等)顺向播放,但在偶数次(2次,4次,6次等)逆向播放。

实例:loading效果

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
	  *{
		  padding:0;
		  margin:0;
	  }
    .contain{
		width:100px;
		margin:20px auto;
		position:relative;
		}
    .contain>i
    {
      position:absolute;
      top:0;
      width:5px;
      height:40px;
      background-color:blueviolet;
      border-radius:6px;
    }
	/*定义动画*/
	@keyframes loading
	{
	  0%{
		  transform:scaleY(1);
		  }
	  50%{
		  transform:scaleY(0.5);
		  }
	  100%{
		  transform:scaleY(1);
		  }
	}
    /*第1个i元素*/
    .contain>i:nth-child(1)
    {
      left: 0;
	  animation-name:loading;
	  animation-duration:1s;
	  animation-timing-function:ease-in;
	  animation-delay:0.1s;
	  animation-iteration-count:infinite;
    }
    /*第2个i元素*/
    .contain>i:nth-child(2)
    {
      left: 10px;
	  animation-name:loading;
	  animation-duration:1s;
	  animation-timing-function:ease-in;
	  animation-delay:0.3s;
	  animation-iteration-count:infinite;
    }
    /*第3个i元素*/
    .contain>i:nth-child(3)
    {
      left: 20px;
	  animation-name:loading;
	  animation-duration:1s;
	  animation-timing-function:ease-in;
	  animation-delay:0.6s;
	  animation-iteration-count:infinite;
    }
    /*第4个i元素*/
    .contain>i:nth-child(4) {
      left: 30px;
	  animation-name:loading;
	  animation-duration:1s;
	  animation-timing-function:ease-in;
	  animation-delay:0.3s;
	  animation-iteration-count:infinite;
    }
  </style>
</head>
<body>
  <div class="contain">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </div>
</body>
</html>

运行结果

播放状态:animation-play-state

概念:animation-play-state属性用来定义动画的播放状态。

语法:

css 复制代码
animation-play-state:running|paused;

属性值

属性值 说明
running 默认值,表示是动画正在播放中
paused 表示动画已被暂停

animation属性

概念:animation属性是一个复合属性,可以将以上单项动画子属性在一行内进行复合设置。简写以上繁琐的属性。

语法:

css 复制代码
animation:animation-name|animation-duration|animation-timing-function animation-delay|animation-iteration-count|animation-direction;

说明:定义animation属性时必须指定animation-name和animation-duration属性,否则没有动画,或者动画持续时间默认为0,不会播放动画,其余子属性可省略。

实例:loading效果

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
	  *{
		  padding:0;
		  margin:0;
	  }
    .contain{
		width:100px;
		margin:20px auto;
		position:relative;
		}
    .contain>i
    {
      position:absolute;
      top:0;
      width:5px;
      height:40px;
      background-color:blueviolet;
      border-radius:6px;
    }
	/*定义动画*/
	@keyframes loading
	{
	  0%{
		  transform:scaleY(1);
		  }
	  50%{
		  transform:scaleY(0.5);
		  }
	  100%{
		  transform:scaleY(1);
		  }
	}
    /*第1个i元素*/
    .contain>i:nth-child(1)
    {
      left: 0;
     animation: loading 1s ease-in 0.1s infinite;
    }
    /*第2个i元素*/
    .contain>i:nth-child(2)
    {
      left: 10px;
      animation: loading 1s ease-in 0.3s infinite;
    }
    /*第3个i元素*/
    .contain>i:nth-child(3)
    {
      left: 20px;
      animation: loading 1s ease-in 0.6s infinite;
	
    }
    /*第4个i元素*/
    .contain>i:nth-child(4) {
      left: 30px;
      animation: loading 1s ease-in 0.3s infinite;
    }
  </style>
</head>
<body>
  <div class="contain">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </div>
</body>
</html>

运行结果

从效果上来看,这两者是等价的。相比较用animation属性的子属性,直接使用animation复合属性上更加简洁清楚。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试