css3中的动画学习分享

最新推荐文章于 2022-06-28 09:40:04 发布

demo软件园

最新推荐文章于 2022-06-28 09:40:04 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/demosoftwa/article/details/114948438

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

CSS3

4 篇文章 0 订阅

订阅专栏

大家好，这里是demo软件园，今天为大家分享的是css3中的动画（animation）。

css3动画：

使元素从一种样式逐渐变化为另一种样式的效果。

动画原理：通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前，播放下一幅画。就会给人造成一种流畅的视觉变化效果。
animation属性是一个简写属性形式: （可以用来描述可动画的属性）

可动画属性的列表：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Css3的动画中，我们不得不提到关键帧（@keyframes）
语法：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
animiationName:必写项，定义动画的名称
keyframes-selector：必写项，可以是关键帧form（0%）和to（100%）可以是百分比，代表的是时间的百分比（时间点）
from：0%
to：100%
css-style：css声明

animation：

animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列
值： none特殊关键字，表示无关键帧。
keyframename标识动画的字符串
animation-duration属性指定一个动画周期的时长。
默认值为0s，表示无动画。
值：一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s
animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。
动画的默认效果：由慢变快再变慢
animation-delay定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)
值:从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(m s)。如果未设置单位，定义无效
animation-iteration-count定义了动画执行的次数（属于动画内的范畴）
值：infinite无限循环播放动画.
动画播放的次数不可为负值.
animation-direction定义了动画执行的方向
值：normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse 反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse反向交替，反向开始交替
animation-fill-mode属于动画外的范畴，定义动画在动画外的状态
值：backwards：from之前的状态与form的状态保持一致
forwards：to之后的状态与to的状态保持一致
botn：backwards+forwards
animation-play-state定义了动画执行的运行和暂停
值：running当前动画正在运行。
paused当前动画以被停止。
注意：在每个动画定义中，顺序很重要：可以被解析为的第一个值被分配给animation-duration, 第二个分配给 animation-delay。

最后，我们通过一张动画帧图制作一个简易动画，原图如下：
在这里插入图片描述

CSS3动画效果图如下：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#test{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				width: 146px;
				height: 244px;
				background: url(test.png) no-repeat;
				background-position:0 0;
				animation: move 1s steps(7,end) infinite ;
			}
			@keyframes move{
				from{
					background-position: 0 0;
				}
				to{
					background-position:-1024px 0;
				}
			}
		</style>
	</head>
	<body>
		<div id="test">
		</div>
	</body>
</html>

好了，今天的分享就到这里，当然，可能存在些许错误望大家海涵并在评论区多多指正交流，谢谢大家花费时间阅览！

demo软件园

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3中的动画学习分享

大家好，这里是demo软件园，今天为大家分享的是css3中的动画（animation）。css3动画：使元素从一种样式逐渐变化为另一种样式的效果。动画原理：通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前，播放下一幅画。就会给人造成一种流畅的视觉变化效果。animation属性是一个简写属性形式: （可以用来描述可动画的属性）可动画属性的列表：https://developer.mozilla.org/en-US/docs/Web/CSS/CS
复制链接

扫一扫

专栏目录