013动画animation

最新推荐文章于 2022-11-25 14:52:08 发布

陀陀吖

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量119

点赞数

分类专栏： h5c3

本文链接：https://blog.csdn.net/weixin_40422393/article/details/89287848

版权

h5c3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用CSS动画实现元素的动态效果，包括动画的基本语法、关键帧的设置以及动画属性如运动曲线、播放次数和方向的调整。通过具体示例，展示了如何使一个div元素从屏幕左侧移动到右侧，并在过程中改变背景颜色和大小。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		
		div{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			left: 0px;
			/*1、调用动画*/
			/*animation: 动画名称  花费时间  运动曲线  何时开始  播放次数   是否反方向 */
			animation: move 3s ease 0s infinite alternate;
		}

		/*2、声明动画   frames关键帧   @Keyframes 动画名称{  }*/
		@Keyframes move{

			/*来自*/
			from {
				left:0px;
				background-color: pink;
			}

			/*去哪里*/
			to{
				left: 1000px;
				background-color: yellow;
			}
		}


		/*3、或者这样子 第二种定义动画方法*/
		@Keyframes move{
			0%{
				left: 0px;
				background-color: pink;
				transform: scale(1);
			}
			20%{
				left: 200px;
				background-color: red;
				transform: scale(2);
			}
			40%{
				left: 400px;
				background-color: yellow;
				transform: scale(3);
			}
			60%{
				left: 600px;
				background-color: purple;
				transform: scale(2);
			}
			70%{
				left: 800px;
				background-color: blue;
				transform: scale(1);
			}
			100%{
				left: 1000px;
				background-color: black;
				transform: scale(3);
			}
		}
		
		@-webkit-Keyframes move{    /*-webkit-让浏览器支持动画*/
			0%{
				left: 0px;
				background-color: pink;
				transform: scale(1);
			}
			20%{
				left: 200px;
				background-color: red;
				transform: scale(2);
			}
			40%{
				left: 400px;
				background-color: yellow;
				transform: scale(3);
			}
			60%{
				left: 600px;
				background-color: purple;
				transform: scale(2);
			}
			70%{
				left: 800px;
				background-color: blue;
				transform: scale(1);
			}
			100%{
				left: 1000px;
				background-color: black;
				transform: scale(3);
			}
		}

		/*animation: 动画名称  花费时间  运动曲线  何时开始  播放次数   是否反方向

		1、运动曲线：匀速（linear）  加速再减速（ease）  低速开始（ease-in）   低速结束（ease-out）   以低速开始和结束（ease-in-out） 自定义（ cubic-bezier(n,n,n,n) ）
		2、播放次数：无数次（infinite）
		3、是否反方向：正常播放（normal）  反向（alternate）
		 */


	</style>
</head>
<body>
	<div></div>
</body>
</html>