9(2021.07.08)

5강 애니메이션( 02:25:41 - 끝 )

학습내용

head에 추가

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

body에 추가

	<div class="animate__animated animate__bounce animate__slow">Example</div>

css

.animate__animated {
	margin-top: 200px;
	margin-left: 200px;
}

• 첫 번째 클래스 명 : animation 적용시킬 것이라는 표현
• 두 번째 클래스 명 : 동작
• 세 번째 클래스 명 : 동작되는 시간, 빠르기

참고 사이트 - https://animate.style/
- https://codepen.io/

어려웠던 점 & 해결방법

없었다. codepen 이라는 사이트를 추천해주셔서 접속해보았는데 재미있는 효과가 많아서 따라해보아야겠다고 생각했다. 이때까지 배운 것보다 복잡할 것 같지만 각각 설정하는 것이 조금 어려운 것 같다.

학습소감

애니메이션을 배우다보니 게임읆 만들어보고 싶다는 생각이 들었다. 언젠가는 만들 수 있을정도로 열심히 해야겠다.