CSS Animation (2)

웹사이트의 대부분의 애니메이션은 단순한 편이나, 포물선을 그리면서 이동하는 효과 같은 경우는 코딩으로 직접 만드는 것이 어렵다. 그래서 툴을 이용하여야 한다.

https://jeremyckahn.github.io/stylie/

온라인 툴을 이용해서 보다 손쉽게 원하는 애니메이션을 구현해 낼 수 있다. 효과의 종류가 매우 많기 때문에 다 외울 수는 없고 직접 눈으로 확인 해보는 편이 좋다.

실무에서 활용될 수 있는 다양한 애니메이션

transition과 마우스hover의 결합.

<nav class="mouse-animation">
	<ul>
		<li><a href="#">메뉴1</a></li>
		<li><a href="#">메뉴2</a></li>
		<li><a href="#">메뉴3</a></li>
		<li><a href="#">메뉴4</a></li>
	</ul>
</nav>

---------------------------------------------------------------------------------------- <메뉴 탭에서 마우스가 갔을 때 옅어지는 에니메이션> html, body { margin: 0; padding: 0; }

ul {
list-style: none;
}

a {
text-decoration: none;
color: #000000;
}

.mouse-animation li {
width: 250px;
background-color: #000000;
padding: 20px;

border-top: solid 5px #dfdfdf;
transition: opacity 0.5s,margin-left 0.5s;

}

.mouse-animation li:hover {

opacity: 0.5;
(안에 있는 모든 것을 투명하게 해 주는 속성.)
margin-left: 10px;

}

.mouse-animation li a {
color: #ffffff;
font-size: 20px;
}

<박스가 움직이는 에니메이션>
.move-box {
position: relative;
width: 200px;
height: 200px;
background-color: red;

animation-name: moveBox;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
animation-fill-mode: backwards;

}

@keyframes moveBox {
0% {
background-color: green;
left: 0px;
top: 0px;
}

25% {
	background-color: yellow;
	left: 500px;
	top: 0px;
}

50% {
	background-color: gray;
	left: 500px;
	top: 500px;
	border-radius: 50%;
}

75% {
	background-color: blue;
	left: 0px;
	top: 500px;
}

100% {
	background-color: red;
	left: 0px;
	top: 0px;
}

}

슈퍼마리오 동전 애니메이션 실습

.outer-border {
display: flex
justify-content: center;
align-items: center;

width: 200px;
height: 200px;
border: solid 15px red;
border-radius: 50%;

margin: 0 auto;
margin-top: 200px;

animation: outerBorder 2s infinite;

}

@keyframes outerBorder {
0% {border-color: red; transform: scale(1); }
25% {border-color: yellow; transform: scale(1.2); }
50% {border-color: blue; transform: scale(1.3); }
75% {border-color: green; transform: scale(1.2); }
100% {border-color: pink; transform: scale(1); }
}

.inner-border {
box-sizing: border-box;
width: 75px;
height: 75px;
border: 5px solid purple;

animation: innerBorder 2s infinite alternate ;

}

@keyframes innerBorder {
0% {transform: rotate(0deg); }
25% {border-color: blue; border-width: 10px; }
50% {border-color: yellow; border-width: 20px; }
75% {border-color: green; border-width: 40px; }
100% {border-color: gray; border-width: 5px; transform: rotate(360deg); }
}

}

.mario-container {
position: relative;
width: 500px;
height: 500px;
border: solid 10px black;

margin: 0 auto;
margin-top: 200px;

}

.mario-container .mario-coin {
position: relative;
width: 70px;
height: 70px;
background-color: yellow;
border-radius: 50%;

margin: 0 auto;
margin-top: 100px;

animation: jumpCoin 0.8s linear infinite;

}

@keyframes jumpCoin {
0% {
transform: translateY(0px) ;
opacity: 1;
}
50% {
transform: translateY(-100px) rotateY(180deg);
opacity: 0;
}
100% {
transform: translateY(-100px) rotateY(360deg);
opacity: 0;
}
}

.mario-container .mario-box {
width: 100px;
height: 100px;
background-color: blue;
margin: 0 auto;

animation: jumpBox 0.5s linear infinite alternate;

}

@keyframes jumpBox {
0% {transform: translateY(0px);}
50% {transform: translateY(-10px);}
100% {transform: translateY(0px);}
}