css3基础知识点--animation动画

最新推荐文章于 2024-06-01 19:46:58 发布

翻滚吧阿俊~~

最新推荐文章于 2024-06-01 19:46:58 发布

阅读量491

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40283570/article/details/94635531

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。

CSS3 @keyframes 规则

要创建CSS3动画，你将不得不了解@keyframes规则。

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。前面CSS3 过渡也可以实现一些动画效果，但是需要用事情去触发才会动起来。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

参数：

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数

5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction

normal 默认动画结束不返回
Alternate 动画结束后返回

8、animation-play-state 动画状态

paused 停止
running 运动

9、animation-fill-mode 动画前后的状态

none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		div{
			width: 100px;
			height: 100px;
			background-color: gray;
			margin-top: 20px;

		}
		
		div:nth-child(1){
			animation: cc1 1s 0s 4;
		}
		div:nth-child(2){
			animation: cc2 4s 1s 1;
		}
		div:nth-child(3){
			position: relative;
			border-radius: 50%;
			animation: cc3 5s ease 2s infinite;
		}
		@keyframes cc1{
			from{background-color: gray;}
			to{background-color: red;}
		}
		@keyframes cc2{
		    0%   {background: red;}
		    25%  {background: yellow;}
		    50%  {background: blue;}
		    100% {background: green;}
		}
		@keyframes cc3{
			0% {background-color: red;left: 0px;top:0px}
			25%{background-color: yellow;left:200px;top:0px;}
			50%  {background: blue;left:200px;top:200px;}
		    70% {background: green;left: 0px ;top:200px;}
		    100%{background-color: red;left: 0px;top:0px;}
		}
	</style>
</head>
<body>
	<div ></div>
	<div ></div>
	<div ></div>
</body>
</html>

人物走路

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation 人物走路动画</title>
	<style type="text/css">
		
		.box{
			width:120px;
			height:182px;
			border:1px solid #000;
			margin:50px auto 0;
			overflow:hidden;
			position:relative;
		}


		.box img{
			position:absolute;
			left:0;
			top:0;
			animation:walking 1s steps(8) infinite;
		}

		
		@keyframes walking{
			
			from{
				left:0px;
			}


			to{
				left:-960px;
			}

		}
	</style>
</head>
<body>
	<div class="box"><img src="images/walking.png"></div>
</body>
</html>

风车旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation 动画</title>
	<style type="text/css">
		
		.box{
			width:400px;
			height:400px;
			margin:50px auto 0;
			background:url(images/fengche.png) no-repeat;
			animation:moving 1s linear 0s infinite;
		}

		@keyframes moving{
			
			from{
				  transform:rotate(0deg);
			}

			to{
				transform:rotate(360deg);

			}	
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

翻滚吧阿俊~~

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3基础知识点--animation动画

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。CSS3 @keyframes 规则要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。CSS3 动画当在@keyframes创建动画，把它绑定到一...
复制链接

扫一扫

专栏目录