animationscss.css

/*@keyframes changeShape{
	from{
		border-radius: 0%;
	}
	10%{
		for stages in animation
	}
	to{
		border-radius: 50%;
	}
}*/
/*@keyframes bounce{
	from{
		transform: translateY(0px);
	}
	25%{
		transform: translateY(-100px);
	}
	50%{
		 transform: translateY(0px);
	}
	75%{
		transform: translateY(-50px);
	}
	to{
		transform: translateY(0px);
	}
}*/
@keyframes swirl1{
	from{
		border-radius: 0%;
	}
	to{
		border-radius: 50%;
	}
}
@keyframes swirl2{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
			
}
@keyframes swirl3{
	from{
		/*transform: translateX(500px);*/
		height: 200px;
		width: 200px;
	}
	to{
		/*transform: translateX(0px);*/
		height: 100px;
		width: 100px;
	}
}
@keyframes revolving{
	from{
		transform: rotateX(90deg) rotateY(90deg);
	}
	to{
		transform: rotateX(-90deg) rotateY(-90deg);
	}
}
#div1{
	width: 100px;
	height: 100px;
	background-color: black;
	margin: 100px;
	/*border-radius: 50%;*/
	/*transform: scale(2);*/
	/*transform: rotate(45deg);*/
	/*can also use rotateX, rotateY to rotate in specific direction, can also use scaleX scaleY*/
	/*transform: translate(100px,100px);*/
	/*translateX and Y can also be used*/
	/*transform: skew(10deg);*/
	/*to use more than one transform property */
	/*transform: translate(100px,100px) rotate(180deg);*/
	transition: 2s ease-in-out ;
	/*ease-in,ease-out,linear,ease-in-out*/
	/*if I want the transition in one property only-*/
	/*transition: height 1s ease-in-out;*/
	/*if I want a delay in transition*/
	/*transition: 1s ease-in-out 0.5s;*/
	/*for timing function*/
	/*transition: 1s steps(4,end);*/
	/*animation: changeShape 1s ease-in-out 2 alternate;*/
	/*animation: bounce 1s ease-in-out 10;*/
	animation-name: swirl1,swirl2,swirl3;
	animation-duration: 1s,1s,1s;
	animation-direction: alternate;
	animation-iteration-count: infinite,infinite,infinite;
	}
#div1:hover{
	
	/*height: 100px;
	width: 100px;*/
	/*border-radius: 50%;*/
}
.cube{
	height: 200px;
	width: 200px;
	position: relative;
	margin: 200px;
	transform-style:preserve-3d ;
	perspective: 10000000px;
	transition: 1s ease-in-out;
	/*transform-style: preserve-3d;*/
	animation: revolving 2s ease-in-out infinite alternate;
}
.face{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 20%;
	left: 20%;
	transition: all 1s;
}
.one{
	background-color: blue;
}
.two{
	background-color: grey;
	transform: rotateY(90deg) translateZ(-100px) translateX(100px);
}
.three{
	background-color: yellow;
	transform: rotateY(90deg) translateZ(100px) translateX(100px);
}
.four{
	background-color: pink;
	transform: rotateX(90deg) translateZ(100px) translateY(-100px);
}
.five{
	background-color: chocolate;
	transform: rotateX(90deg) translateZ(-100px) translateY(-100px);
}
.six{
	background-color: black;
}