阅读 411
阿ken的HTML、CSS的入门指南(终极篇)_CSS3高级应用

阿ken的HTML、CSS的入门指南(终极篇)_CSS3高级应用

这是我参与 8 月更文挑战的第 21 天,活动详情查看: 8月更文挑战

感激相遇 你好 我是阿ken

作者:请叫我阿ken
链接:juejin.cn/user/109118…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

🌊🌈关于前言:

文章部分内容及图片出自网络,如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴。

🌊🌈关于内容:

9.3 动画 ( animation 属性 )

CSS3 除了支持渐变、过渡和转换特效外,还可以实现强大的动画效果。在 CSS3 中,使用 animation 属性可以定义复杂的动画。

本节将对动画中的 @keyframes 关键帧以及 animation 相关属性进行详细讲解。

9.3.1 @keyframes

使用动画之前必须先定义关键帧,一个关键帧表示动画过程中的一个状态。在 CSS3 中,@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐变为新样式的动画效果。@keyframes 属性的语法格式如下:

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

在上面的语法格式中, @keyframes 属性包含的参数具体含义如下:

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

案例:使用 @keyframes, 属性可以定义一个淡入动画,示例代码如下:

			@keyframes 'apper'{
				0% {
					opacity: 0;
				} /* 动画开始时的状态,完全透明 */
				
				100% {
					opacity: 1;
				} /* 动画结束时的状态,完全不透明 */
			}
复制代码

上述代码创建了一个名为 apper 的动画,该动画在开始时 opacity 为 0 (透明),动画结束时 opacity 为 1 (不透明)。该动画效果还可以使用等效代码来实现,具体如下:

			@keyframes 'apper'{
				from {
					opacity: 0;
				} /* 动画开始时的状态,完全透明 */
				
				to {
					opacity: 1;
				} /* 动画结束时的状态,完全不透明 */
			}
复制代码

另外,如果需要创建一个淡入谈出的动画效果,可以通过如下代码实现,具体如下:

			@keyframes 'appeardisappear'{
				from, to {
					opacity: 0;
				} /* 动画开始和结束时的状态,完全透明 */
				
				20%, 80% {
					opacity: 1;
				} /* 动画的中间状态,完全不透明 */
			}
复制代码

在上述代码中,为了实现淡入淡出的效果,需要定义动画开始和结束时元素不可见,然后渐渐谈出,在动画的 20% 处变得可见,然后动画效果持续到 80% 处,再慢慢淡出。

  • 注意:
    Intemet Explorer9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

9.3.2 animation-name 属性

animaion-name 属性于定义要应用的动画名称,为 @keyframes 动画规定名称。其基本语法格式如下:

animation-name: keyframename | none;
复制代码

在上述语法中,animation-name 属性初始值为 none,适用于所有块元素和行内元素。keyframename 参数用于规定需要绑定到选择器的 keyframe 的名称,如果值为 none,则表示不应用任何动画,通常用于覆盖或者取消动画。

9.3.3 animation-duration 属性

animation-duration 属性用于定义整个动画效果完成所需要的时间,以秒或毫秒计,其基本语法格式如下:

animation-duration: time;
复制代码

在上述语法中,animation-duration 属性初始值为0,适用于所有块元素和行内元素。time 元素是以秒 (s) 或者毫秒 (ms) 为单位的时间,默认值为0,表示没有任何动画效果。当值为负数时,则被视为0。

案例:演示 animation-name 及 animation-duration 属性的用法,

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>animation-name 及 animation-duration 属性</title>
		
		<style type="text/css">
			
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation-name: mymove;
				/* 定义动画名称 */
				
				animation-duration: 5s;
				/* 定义动画时间 */
				
				-webkit-animation-name: mymove; 
				/* Safari and Chrome浏览器兼容代码 */
				-webkit-animation-duration: 5s;
			}
			
			@keyframes mymove {
				from {
					left: 0px;
				}
				
				to {
					left: 200px;
				}
				
				@-webkit-keyframes mymove {
					
					from {
					    left: 0px;
					} /* 动画开始时的状态 */
					
					to {
					   left: 200px; 
					} /* 动画结束时的状态 */
				}
			}
			
		</style>
		
	</head>
	<body>		
		
		<div></div>
		
	</body>
</html>
复制代码

在这里插入图片描述
很快就会开始自动右移,
在这里插入图片描述
最后位置,
在这里插入图片描述

在上述案例中,分别使用 animation-name 属性定义要应用的动画名称,使用 animation-duration 属性定义整个动画效果完成所需要的时间。另外,使用 form 和 to 函数指定当前关键帧要应用动画过程中的位置。

动画开始时,首先,元素以低速开始,然后加快向右移动,当接近距离左边 200 像素的位置时速度减慢,直至移动到最右端,

9.3.4 animation-timing-function 属性

animation-timing-function 用来规定动画的速度曲线,可以定义使用哪种方式来执行动画效果。animation-timing-function 属性的语法格式为:

animation-timing-function: value;
复制代码

在上述语法中,animation-timing-function 的默认属性值为 ease,适用于所有的块元素和行内元素。另外,animation-timing-function 还包括 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值,

animation-timing-function 的常用属性值

属性值描述
linear动画从头到尾的速度是相同的
ease默认。动画以低速开始,然后加快,在结束前变慢
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
cubic-bezier(n, n, n, n)在cubic-bezier 函数中自己的值。可能的值是从0到1的数值

案例:在上个案例的基础上进行演示 animation-timing-function 属性的用法,

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>animation-timing-function 属性</title>
		
		<style type="text/css">
			
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation-name: mymove;
				/* 定义动画名称 */
				
				animation-duration: 5s;
				/* 定义动画时间 */
				
				animation-timing-function: linear; 
				/*定义动画速度曲线*/
				
				/*Safari and Chrome 浏览器兼容代码*/ 
				-webkit-animation-name: mymove;
				-webkit-animation-duration: 5s;
				-webkit-animation-timing-function: linear;
			}
			
			@keyframes mymove {
				from {
					left: 0px;
				}
				
				to {
					left: 200px;
				}
				
				@-webkit-keyframes mymove {
					/*Safari and Chrome浏览器兼容代码*/
					
					from {
					    left: 0px;
					} /* 动画开始时的状态 */
					
					to {
					   left: 200px; 
					} /* 动画结束时的状态 */
				}
			}
			
		</style>
		
	</head>
	<body>		
		
		<div></div>
		
	</body>
</html>
复制代码

在上述案例中,分别使用 animation-name 属性定义要应用的动画名称,使用 animation-duration 属性定义整个动画效果需要 5 秒时间, 使用 animation-timing-function 属性规定动画从头到尾速度相同。

9.3.5 animation-delay 属性

animation-delay 属性用于定义执行动画效果之前延迟的时间,即规定动画什么时候开始。其基本语法格式为:

animation-delay: time;
复制代码

在上述语法中,参数 time 用于定义动画开始前等待的时间,其单位是 s 或者 ms,默认属性值为 0。animation-delay 属性适用于所有的块元素和行内元素。

案例:在上个案例的基础上进行演示 animation-delay 属性的使用,在 CSS 中添加如下代码:

animation-delay: 2s;
-webkit-animation-delay: 2s;
复制代码

动画开始前将会延迟 2s 的时间,然后才开始执行动画。

9.3.6 animation-iteration-count 属性

animation-iteration-count 属性用于定义动画的播放次数,其基本语法如下:

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

在上述语法格式中,animation-iteration-count 属性初始值为1,适用于所有的块元素和行内元素。如果属性值为number,则用于定义播放动画的次数;如果是 infinite,则指定动画循环播放。

案例:继续在上个案例的基础上进行演示,在 CSS 中添加如下代码:

animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
复制代码

在上面的代码中,使用 animation-iteration-count 属性定义动画效果需要播放 3 次。此时,刷新页面,动画效果将连续播放三次后停止。

9.3.7 animation-direction 属性

animation-direcion 属性定义当前动画播放的方向,即动画播放完成后是否逆向交替循环。其基本语法如下:

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

在上述语法格式中,animation-direction 属性初始值为 normal ,适用于所有的块元素和行内元素。该属性包括两个值,默认值 normal 表示动画每次都会正常显示。如果属性值是 " alternate " ,则动画会在奇数次数 (1、3、5等) 正常播放,而在偶数次数 (2、4、6等) 逆向播放。

案例:演示 animation-direction 属性的用法,

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>animation-direction 属性</title>
		
		<style type="text/css">
			
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				
				animation-name: mymove;
				/*定义动画名称*/ (1)
				
				animation-duration: 5s;
				/*定义动画时间*/
				
				animation-timing-function: linear;
				/*定义动画速度曲线*/
				
				animation-delay: 2s;
				/*定义动延迟时间*/
				
				animation-iteration-count: 3;
				/*定义动画的播放次数*/
				
				animation-direction: alternate;
				/*定义动画播放的方向*/ (2)
				
				/* Safari and Chrome 浏览器兼容代码 */
				-webkit-animation-name: mymove;
				-webkit-animation-duration: 5s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-delay: 2s;
				-webkit-animation-iteration-count: 3;
				-webkit-animation-direction: alternate;
			}
			
			@keyframes mymove {
				from {
					left: 0px;
				}
				
				to {
					left: 200px;
				}
				
				@-webkit-keyframes mymove {
					/* Safari and Chrome浏览器兼容代码 */
					
					from {
					    left: 0px;
					} /* 动画开始时的状态 */
					
					to {
					   left: 200px; 
					} /* 动画结束时的状态 */
				}
			}
			
		</style>
		
	</head>
	<body>		
		
		<div></div>
		
	</body>
</html>
复制代码

设置 animation-direction 属性的值是 " alternate ",则动画会在奇数次数正常播放,而在偶数次数逆向播放。

9.3.8 animation 属性

与 transition 属性一样,animation 属性也是一个简写属性,用于在一个属性中设置 animation-name、animation-duration、animation-timing-function、animation-delay、 animation-iteration-count 和 animation-direction 六个属性值。 其基本语法格式如下:

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

在上述语法中,使用 animation 属性时必须指定 animation-name 和 animation-duration 属性,否则持续的时间为0,并且永远不会播放动画。

使用 animation 属性可以将上个案例中的第(1) ~ (2) 行代码进行简写,具体如下:

animation: mymove 5s linear 2s 3 alternate;
复制代码

今日入门学习暂时告一段落

Peace

🌊🌈往期回顾:

阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
阿ken的HTML、CSS的入门指南(十五)_表单的应用
阿ken的HTML、CSS的入门指南(十六)_多媒体技术
阿ken的HTML、CSS的入门指南(十七)_多媒体技术

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(十八)
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(十九)
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(二十)

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(六)

🌊🌈关于后记:

感谢阅读,希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教

原创不易,「点赞」+「关注」 谢谢支持❤

文章分类
前端
文章标签