css_animation运动的贝塞尔曲线-摩杜云开发者社区

css_贝塞尔曲线的变速与匀速

模拟animation效果
实现模拟

整体布局
转换为1行5列
动画
整体

结束

模拟animation效果

css_animation运动的贝塞尔曲线_html

参考MDN文档说明：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions animation-timing-function常见的四种速率变化

ease 默认值，朝向动画中间的速度增加，最后逐渐减慢
ease-in 开始时会缓慢，随着动画属性过渡的速度增加，直到完成为止
ease-in-out 动画属性缓慢过渡，加速，然后再次减速
ease-out 开始很快，放慢动画的速度继续
linear 线性匀速

实现模拟

整体布局

<div class='box'>
	<ul>
		<li>ease</li>
		<li>ease-in</li>
		<li>ease-in-out</li>
		<li>ease-out</li>
		<li>linear</li>
	</ul>
</div>

css_animation运动的贝塞尔曲线_animation_02

转换为1行5列

grid-template 网络划分
gap 间距

ul{
	display: grid;
	grid-template:1fr/repeat(5,1fr);
	list-style: none;
	gap:1em;
}
li{
	text-align: center;
	color: #000000;
	text-transform: uppercase;
	height:50px;
	width: 100px;
	animation-name: move;
	animation-duration: 6s;
	animation-iteration-count:infinite;
}

动画

下移80%;

@keyframes move{
	to{
		transform: translateY(80vh);
	}
}
li:nth-child(1){
	background: #CAD3C8;
	animation-timing-function: ease;
}
li:nth-child(2){
	background: #3B3B98;
	animation-timing-function: ease-in;
}
li:nth-child(3){
	background: #B33771;
	animation-timing-function: ease-in-out;
}
li:nth-child(4){
	background: #25CCF7;
	animation-timing-function: ease-out;
}
li:nth-child(5){
	background: #EAB543;
	animation-timing-function: linear;
}

整体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>annimation</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				width: 100vw;
				height: 100vh;
				background: #7f8fa6;
				display: grid;
				grid-template: 1fr/1fr;
			}

			.box {
				margin: 0 auto;
			}

			ul {
				display: grid;
				grid-template: 1fr/repeat(5, 1fr);
				list-style: none;
				gap: 1em;
			}

			li {
				text-align: center;
				color: #000000;
				text-transform: uppercase;
				height: 50px;
				width: 100px;
				animation-name: move;
				animation-duration: 6s;
				animation-iteration-count: infinite;
			}

			@keyframes move {
				to {
					transform: translateY(80vh);
				}
			}

			li:nth-child(1) {
				background: #CAD3C8;
				animation-timing-function: ease;
			}

			li:nth-child(2) {
				background: #3B3B98;
				animation-timing-function: ease-in;
			}

			li:nth-child(3) {
				background: #B33771;
				animation-timing-function: ease-in-out;
			}

			li:nth-child(4) {
				background: #25CCF7;
				animation-timing-function: ease-out;
			}

			li:nth-child(5) {
				background: #EAB543;
				animation-timing-function: linear;
			}
		</style>
	</head>
	<body>
		<div class='box'>
			<ul>
				<li>ease</li>
				<li>ease-in</li>
				<li>ease-in-out</li>
				<li>ease-out</li>
				<li>linear</li>
			</ul>
		</div>
	</body>
</html>

结束

css_animation运动的贝塞尔曲线_html_03