keyframes介绍与调用动画方法

最新推荐文章于 2024-04-20 17:01:30 发布

VIP文章山有木兮木有枝_雅俗共赏

最新推荐文章于 2024-04-20 17:01:30 发布

阅读量3.8k

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_57727027/article/details/123297283

版权

keyframes介绍

@keyframes changecolor{

 0%{

  background: red;

 }

 50%{

  background: red;

 }

 100%{

  background: green;

 }

}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，

如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，

从而达到一种在不断变化的效果。

02调用动画

调用动画
	animation-name属性主要是用来调用 @keyframes 定义好的动画。
	需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），
	如果不一致将不具有任何动画效果。
	属性值：
	none:默认值。当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。
	“@keyframes”定义的动画名称。

eg：

视图页面代码
<body>
	<div><span></span></div>
</body>

外链CSS的代码
@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}

@keyframes around {
	 0%{
	 transform:translateX(0);
	}
	 25% {
	 transform: translateX(180px);
	}
	 50% {
	 transform: translate(180px, 180px);
	}
	 75% {
	 transform:translate(0, 180px);
	}
	 100% {
	 transform: translateY(0);
	}
}
div {
	width: 200px;
	height: 200px;
	border: 2px solid #C0F;
	margin: 100px auto;
}
div span {
	display: block;
	width: 20px;
	height: 20px;

最低0.47元/天解锁文章

山有木兮木有枝_雅俗共赏

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
keyframes介绍与调用动画方法

keyframes介绍@keyframes changecolor{ 0%{ background: red; } 50%{ background: red; } 100%{ background: green; }}在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。02调用动画调用动画
复制链接

扫一扫