css3 div跳动动画_CSS3 动画详解

最新推荐文章于 2023-03-03 10:36:04 发布

千1100

最新推荐文章于 2023-03-03 10:36:04 发布

阅读量314

点赞数

文章标签： css3 div跳动动画

本文链接：https://blog.csdn.net/weixin_35123047/article/details/112116645

版权

本文详细介绍了如何使用CSS3的@keyframes规则创建div的跳动动画。通过定义动画名称、持续时间和样式变化，实现元素从一种样式平滑过渡到另一种。内容包括动画的基本概念、关键帧的设置以及动画在不同阶段的样式控制，旨在帮助开发者创建动态的网页效果。

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

前言

今天来说个好东西 css3 动画效果。它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

@keyframes 规则

建 CSS3 动画，就需要了解 @keyframes规则

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

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

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

！！必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0

<style type="text/css">
	div {
		width: 100px;
		height: 100px;
		background: #00FFFF;
		margin: 0 auto;
		animation: myfirst 3s; /* 绑定 */
	}
	@keyframes myfirst { /* 动画名称 myfirst */
		from {
			background: #00FFFF;
		}
		to {
			background: #4c2bb7;
		}
	}
</style>

<body>
	<div></div>
</body>

上面的意思是把 "myfirst" 动画捆绑到 div 元素，时长：3 秒

CSS3动画是什么？

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

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

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

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

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

<style type="text/css">
	div {
		width: 100px;
		height: 100px;
		background: red;
		animation: myfirst 3s;
	}

	@keyframes myfirst {
		0% {
			background: red;
		}
		25% {
			background: yellow;
		}
		50% {
			background: blue;
		}
		100% {
			background: green;
		}
	}
</style>

<body>
	<div></div>
</body>