css @keyframes配合animation 简单动画效果

最新推荐文章于 2025-03-21 23:12:39 发布

guizi0809

最新推荐文章于 2025-03-21 23:12:39 发布

阅读量649

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/guizi0809/article/details/121207317

版权

css 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了CSS3的animation属性，用于创建动画效果，包括name、duration、timing-function、delay、iteration-count和direction等参数。通过实例展示了如何使用关键帧(@keyframes)创建渐隐渐现和移动效果。这两个效果分别应用于圆形背景的透明度变化和小箭头的平移动画，详细解释了每个关键帧的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.animation

animation 属性是一个简写属性，用于设置六个动画属性：
语法：

animation: name duration timing-function delay iteration-count direction

属性	可选值	描述
animation-name		规定需要绑定到选择器的 keyframe 名称
animation-duration		规定完成动画所花费的时间
animation-timing-function	linear \| ease \| ease-in \| ease-out \| ease-in-out	规定动画的速度曲线
animation-delay		规定在动画开始之前的延迟
animation-iteration-count		规定动画应该播放的次数
animation-direction	normal \| reverse \| alternate \| alternate-reverse	规定是否应该轮流反向播放动画

2.keyframes 关键帧

@keyframes animationname { 
	keyframes-selector {
		css-styles;
	}
}

<div class="box"></div>

渐隐渐现效果：

.box {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: pink;
	animation: shadow 1s linear infinite alternate;
}

@keyframes shadow {
	0% {
		opacity:0;
	}
	100% {
		opacity: 1;
	}
}

移动效果：

.arrow {
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: 25px;
	left: 50%;
	margin-left: -11px;
	border: 3px solid transparent;
	border-top: 3px solid #000;
	border-left: 3px solid #000;
	z-index: 99;
	opacity: .8;
	transform: rotate(45deg);
	animation: arrow 1.5s ease-in-out infinite;
}
          
@keyframes arrow {
	0% {
		opacity:0;
		transform:translate(0, 0px) rotate(45deg)
	}
	50% {
		opacity:1;
		transform:translate(0, -5px) rotate(45deg)
	}
	00% {
		opacity:0;
		transform:translate(0, -10px) rotate(45deg)
	}
}