Animation

Leejihye·2021년 7월 7일

학습한 내용

코드

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<!-- <div class="transform"></div> -->
	<!-- <div class='transition'></div> -->
	<!-- <div class="animation"></div> -->
	<!-- <div class="spin-lion"></div> -->
</body>
</html>

CSS

.transform{
	width: 300px;
	height: 300px;
	background-color: yellow;

	transform: rotate(10deg);
	/*transform: scale(2,3);*/
	/*transform: skew(10deg, 0deg);*/
	/*transform: translate(100px, 300px);*/

	/*margin-left: 300px;*/
	/*margin-top: 500px;*/
}

.transition {
	width: 300px;
	height: 300px;
	background-color: yellow;

	/*
	transition-property: width;
	transition-duration: 2s;
	transition-timing-function: linear;
	transition-delay: 1s;
	*/

	transition: width 2s linear , height 2s linear;
}

.transition:hover {
	width: 600px;
	height: 600px;
}

.animation{
	width: 300px;
	height: 300px;
	background-color: yellow;

	animation-name: changewidth;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 1s;

	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes changewidth{
	0%{
		width: 300px;
		height: 300px;
		background-color: yellow;
	}

	50%{
		background-color: blue;
	}

	100%{
		width: 600px;
		height: 600px;
		background-color: red;
		/*border: solid 10px blue;*/
	}
}

.spin-lion {
	width: 150px;
	height: 150px;
	background-color: blue;
/*
	animation-name: spinLion;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
*/
	animation: spinLion 1.5s linear infinite alternate;

}

@keyframes spinLion{
	from{
		transform: rotate(-10deg);
	}
	to{
		transform: rotate(10deg);
	}
}