优化CSS中的浮动画

Question

我做了什么...

我正在为网站创建"浮动"动画.我已成功创建了动画,但我正在努力正确配置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>

我想要实现的目标

因此,理想情况下,我希望这三个圆圈以自然而真实的方式"漂浮",而不是如此机器人.

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

如果这会产生影响,请随意使用比例尺......

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>