CSS3动画

最新推荐文章于 2023-08-10 20:14:15 发布

star...

最新推荐文章于 2023-08-10 20:14:15 发布

阅读量310

点赞数

分类专栏： css 前端 html5 文章标签： css3 html

本文链接：https://blog.csdn.net/star0311/article/details/89206639

版权

前端同时被 3 个专栏收录

18 篇文章 2 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

1、 @keyframes规则

@keyframes规则用于创建动画，在@keyframes中规定某项css样式，就能创建由当前样式逐渐过渡为新样式的动画效果。
定义动画的方式有两种：
1）

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		@keyframes move{
			from{
				background: #00FFFF;
			}
			to{
				background: #f66;
			}
		}
		.wrap{
			width: 100px;
			height: 100px;
			background: #f66;
			animation: move 5s;
		}
	</style>
</head>
<body>
	<div class="wrap"></div>
</body>

2）

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		@keyframes move{
			0%{
				background: #00FFFF;
			}
			100%{
				background: #f66;
			}
		}
		.wrap{
			width: 100px;
			height: 100px;
			background: #f66;
			animation: move 5s;
		}
	</style>
</head>
<body>
	<div class="wrap"></div>
</body>

动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数。关键词"form"和"to"等同于0%和100%，0%是动画的开始，100%是动画的完成。

2、将动画绑定达到选择器

当在@keyframes中创建动画时，要把它捆绑到某个选择器，才会产生动画效果。至少要规定以下两项css3动画属性，才可以把动画绑定到选择器：

动画的名称
动画的时长

例如：把“move”捆绑到div

.wrap{
	width: 100px;
	height: 100px;
	background: #f66;
	animation: move 5s;
}

3、CSS3动画属性

在这里插入图片描述
1）animation-name 定义一个或多个动画的名称
2）animation-duration 动画执行的时间
0：动画不执行
正数
3）animation-delay 动画执行的延迟时间
0：不延迟，立即执行
负数：延迟之前的动画被截断
正数：按照设置的时间延迟
4）animation-interation-count 设置动画执行的次数
正数：按照设置的时间执行
infinate：无限循环
5）animation-timing-function 动画的运动方式
linear、ease、ease-in、ease-out、ease-in-out
6）animation-direction 动画运动的方向
normal：正常运动
reverse：反向运动
alternate：正反方向交替运动
alternate-reverse：与alternate正好相反
7）animation-fill-mode：设置对象动画时间之外的状态
name：默认值
forwad：保持动画结束时的状态
backwards：保持动画开始时的状态
both：遵循forwards和backwards两种规则

属性介绍
animation-fill-mode它能够控制元素在动画执行前和动画执行后的样式。一个带有延迟（animation-delay），并且按正常方向（animation-direction：normal）执行的动画，动画按执行时间来划分，分为3个过程，动画等待、动画进行、动画结束。默认情况下，只有在动画进行状态，才会执行用@keyframes所声明的动画；而在动画等待和动画结束状态，对元素样式并不会产生任何影响。

none
取值为none，不会对动画等待和动画结束的元素样式发生改变
forwards
动画结束后，元素的样式将设置为最后一帧的样式。
backwards
在动画等待的时间，元素的样式将设置为动画第一帧的样式。

从技术上讲，每一个动画都有一个默认的延迟时间，只不过这个时间是0，所以你并没有看到其中的变化。
backwards：动画等待的时间，元素的样式将设置为动画第一帧的样式。如果给动画设置一个1s的延迟，元素在等待的这1s内，元素的样式设置为动画第一帧（也就是@keyframes中的from或0%）的样式。
both
同时应用forwards和backwards两个属性值的效果，意味着在动画等待和动画结束状态，元素分别应用动画第一帧和最后一帧的样式。

8）animation-play-state：设置对象动画的状态（控制动画运行或暂停）
running：默认值
paused：暂停运动

复杂的写法：

div
{
	animation-name: myfirst;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}

简单的写法：

div
{
	animation: myfirst 5s linear 2s infinite alternate;
}

star...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画

1、 @keyframes规则@keyframes规则用于创建动画，在@keyframes中规定某项css样式，就能创建由当前样式逐渐过渡为新样式的动画效果。定义动画的方式有两种：1）<head> <meta charset="UTF-8"> <title></title> <style type="text/css"&gt...
复制链接

扫一扫