1) 학습내용
animate.css 활용법
<!DOCTYPE html>
<html>
<head>
<meta charset="ftp-8">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>
<div class="animate__animated animate__bounce animate__delay-2s">Example</div> ---> 바운스 효과
<div class="animate__animated animate__shakeX animate__slow">Example</div> ---> 쉐이크 효과
<div class="animate__animated animate__bounce animate__faster color-red">Example</div> ---> 빠르게, 이미 만들어 놓은 기능을 가져다 사용
<h2 class="color-red">Hello World</h2> ---> 컬러 레드를 가지면 모두 붉은색으로 표현
</body>
</html>CSS
.color-red { ---> 색상을 넣어줌, 애니메이션에 넣어줌
color: red;
}
.animate__animated { ---> 다양한 것들이 정의되어 있는 것을 가져와서 사용
margin-top: 200px;
margin-left: 200px;
}- https://animate.style/ (반복적으로 사용되는 애니메이션 효과)
animateslow 2s
animateslower 3s
animatefast 800ms
animatefaster 500ms
codepen.io
-
animation 이라고 검색, 다른 사람들이 만들어 놓은 효과를 볼 수 있음
-
굉장히 많은 종류의 애니메이션 효과들을 볼 수 있음
2)어려운점
-
개별적으로 놓고 보면 이해가 되지만 따로 떨어뜨려 놓고 보거나, 새로운 스타일의 애니메이션 기법을 조합하기 시작하면서 더 헷갈림
-
추가적으로 나오는 새로운 것들을 외우려고 하니어려움
3)해결방법
- 반복 또 반복 말고는 답이 없는 것 같음.
4)학습소감
-
이전에 애니메이션 효과에 들어가는 것들이 갑자기 많아져 헷갈림.
-
과연 이렇게 학습하는 것이 의미가 있는지 의문점이 듦.
-
반복해보기로 함.
Please be wonderful but don't be so serious, enjoy this journey with the good people!