【css常用动画总结01】

一、效果如下：

二、css常用动画代码：

.flex-box{
	position: relative;
}
.animation-all {
	display: flex;
	p{
		margin:0;
		font-size: 12px;
	}
	.animate-test1 {
		width: 102.4px;
		height: 102.4px;
		background: url(../assets/images/caomei.png) no-repeat center center;
		background-size: 100% 100%;
		animation: 10s ease 0s infinite normal none running animate1;
		margin-right: 30px;
	}

	.animate-test2 {
		width: 102.4px;
		height: 102.4px;
		background: url(../assets/images/caomei.png) no-repeat center center;
		background-size: 100% 100%;
		animation: animate2 3s infinite alternate;
		margin-right: 30px;
	}

	.animate-test3 {
		width: 102.4px;
		height: 102.4px;
		background: url(../assets/images/caomei.png) no-repeat center center;
		background-size: 100% 100%;
		animation: animate3 3s infinite alternate;
		margin-right: 30px;
	}
		
	.animate-test4 {
		width: 102.4px;
		height: 102.4px;
		background: url(../assets/images/caomei.png) no-repeat center center;
		background-size: 100% 100%;
		animation: animate4 2s infinite; /* 应用动画 */
		margin-right: 30px;
		position: absolute;
	}	
}

	@keyframes animate1 {
		0% {
			// transform: translateY(-50%) rotateY(0deg);
			transform: translateY(0%) rotateY(0deg);
		}

		100% {
			// transform: translateY(-50%) rotateY(360deg);
			transform: translateY(0) rotateY(360deg);
		}
	}
	
	@keyframes animate2 {
		0% {
			transform: rotateX(0deg);
		}
	
		100% {
			transform: rotateX(-360deg);
		}
	}
	
	@keyframes animate3 {
		0% {
			transform: rotateY(0deg);
		}
	
		100% {
			transform: rotateY(-360deg);
		}
	}
	
	@keyframes animate4 {
		0% {
			top: -5px;
			// opacity: 0;
		} /* 动画开始时 */
		50% {
			top: 5px;
			// opacity: 1;
		} /* 动画中间时 */
		100% {
			top: -5px;
			// opacity: 0;
		} /* 动画结束时 */
	}

三、寄语：

愿我们温暖待人
也能被人温暖以待