css - 优化 CSS 中的 float 动画

Question

我做了什么...

我正在为网站创建“ float ”动画。我已经成功创建了动画，但我正在努力正确配置 CSS 以确保元素以更少的“机器人”和更逼真的方式进行动画处理...

我的代码

/* Define the icons */
.icon {position:absolute;display:block;border:2px solid #000;border-radius:50%;}
.icon:nth-child(1) {width:95px;height:95px;top:10px;left:0;}
.icon:nth-child(2) {width:140px;height:140px;top:65px;left:80px;}
.icon:nth-child(3) {width:70px;height:70px;top:45px;left:218px;}

/* Define the animations for the icons */
.icon {
	animation-name: floating;
	-webkit-animation-name: floating;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}
.icon:nth-child(1) {animation-duration: 4s;}
.icon:nth-child(2) {animation-duration: 5s;}
.icon:nth-child(3) {animation-duration: 3s;}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(15%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}
@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(15%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}
}

<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>

我正在努力实现的目标

因此，理想情况下，我希望这三个圆圈以一种自然而真实的方式“漂浮”，而不是那么机械化。

任何人都可以在动画配置方面提供一些帮助以确保它看起来更自然吗？我基本上希望这三个圆圈实际上看起来像是在 float ，而不是仅仅以可预测的方式上下移动...

如果这会有所作为，请随意使用秤...

Answer 1

使用animation-timing-function: ease-in-out;

/* Define the icons */
.icon {position:absolute;display:block;border:2px solid #000;border-radius:50%;}
.icon:nth-child(1) {width:95px;height:95px;top:10px;left:0;}
.icon:nth-child(2) {width:140px;height:140px;top:65px;left:80px;}
.icon:nth-child(3) {width:70px;height:70px;top:45px;left:218px;}

/* Define the animations for the icons */
.icon {
	animation-name: floating;
	-webkit-animation-name: floating;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
}
.icon:nth-child(1) {animation-duration: 4s;}
.icon:nth-child(2) {animation-duration: 5s;}
.icon:nth-child(3) {animation-duration: 3s;}

@keyframes floating {
	0% {
		transform: translate(0%,0%);	
	}
	25% {
		transform: translate(5%,15%);	
	}	
	50% {
		transform: translate(10%,5%);	
	}	
	75% {
		transform: translate(0%,15%);	
	}	
	100% {
		transform: translate(0%,0%);
	}			
}
@-webkit-keyframes floating {
	0% {
		-webkit-transform: translate(0%,0%);	
	}
	25% {
		-webkit-transform: translate(5%,15%);	
	}	
	50% {
		-webkit-transform: translate(10%,5%);	
	}	
	75% {
		-webkit-transform: translate(0%,15%);	
	}	
	100% {
		-webkit-transform: translate(0%,0%);
	}			
}

<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>