animation动画：@keyframes、from to 、animation-name、animation-duration(持续时间)+ 结合transfrom变形实现绕场一周+旋转+放大/缩...

<style>
		/*动画和过度transition区别，动画调用就可以自动播放，transition需要有事件驱动才行*/
		/*1.定义动画名为moveDemo*/
		@keyframes moveDemo {
			/*动画开始也可：0%=from 100%=to*/
			0%{
				transform: translate(0px,0px);
			}
			/*动画结束*/
			100%{
				transform:translate(500px,0);
			}
		}

		div{
			/*2.调用动画:页面一加载即会执行动画*/
			animation-name:moveDemo;
			/*3.设置动画持续时间*/
			animation-duration: 5s;

			width: 300px;
			height: 300px;
			background-color: red;
		}
	</style>
	<div></div>

页面一加载即会开始动画：红方块从左走到右

绕场一周+旋转+放大/缩小+变色

<style>
		/*动画和过度transition区别，动画调用就可以自动播放，transition需要有事件驱动才行*/
		/*1.定义动画名为moveDemo*/
		@keyframes moveDemo {
			/*动画开始也可：0%=from 100%=to*/
			0%{
				transform: translate(0px,0px);/*可为空啥也不写，甚至0%直接都不写*/
			}
			25%{
				/*x轴移动1000px； 旋转90度；放大2.5倍*/
				transform:translateX(1000px) rotate(90deg) scale(2.5);
				/*旋转轴为中心*/
				transform-origin: 50% 50%;
				background-color: yellow;
			}
			50%{
				transform:translate(1000px,400px) rotate(180deg);
				transform-origin: left bottom;
			}
			75%{
				transform:translate(0,400px) rotate(-270deg) scale(0.1);
				transform-origin: left top;
				background-color: blue;
			}
			/*动画结束*/
			100%{
				transform:translate(0,0) rotate(360deg);
				transform-origin: right top;
			}
		}

		.wa{
			/*2.调用动画:页面一加载即会执行动画*/
			animation-name:moveDemo;
			/*3.设置动画持续时间*/
			animation-duration: 15s;

			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<div class="wa"></div>