> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/javascript/undefined-1.md).
# 간단한 애니메이션 만들기
✨ 과제. 버튼 누르면 modal 창 띄우기 (jQuery 사용하기)
{% code title="main.css" %}
```css
.black-bg{
display: none;
}
.show-modal{
display: block;
}
```
{% endcode %}
```html
```
💎간단한 애니메이션 만들기
지난번 UI 만들기는 이런 프로세스로 만들었다.
1\. HTML / CSS로 미리 디자인
2.필요할 때 호출
애니메이션은
1\. 시작 스타일 만들기 (class)
2\. 최종 스타일 만들기 (class)
3\. 원할 때 최종스타일로 변하라고 JS 코드 짜기
4\. 시작스타일에 transition 추가
js007.html을 복사해 js008.html 만들기
{% code title="js008.html" %}
```html
Bootstrap demo
로그인하세요
An item
A second item
A third item
A fourth item
And a fifth one
```
{% endcode %}
black-bg 클래스를 black-bg1 클래스로 변경하고 css 추가
{% code title="main.css" %}
```css
.black-bg1 {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
visibility: hidden;
opacity: 0;
}
.show-modal1 {
visibility: visible;
opacity: 1;
}
```
{% endcode %}
이렇게 1.시작스타일과 2.최종스타일을 작성함
기존의 display는 애니메이션이 잘 동작하지 않기 때문에
비슷한 역할을 하는 visibility: hidden 을 사용함
opacity는 투명도 조절 속성 (0은 투명 1은 불투명) 0과 1사이의 값으로 투명도 조절 가능
3. 원할 때 최종스타일로 변하라고 JS 코드 짜기
```javascript
```
4. 시작스타일에 transition 추가
```css
.black-bg1 {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
visibility: hidden;
opacity: 0;
transition: all 5s;
}
```
transition의 시간을 조절해서 애니메이션 길이 변경 가능
✨ 실습. 기존에 만들었던 navbar를 애니메이션을 사용해 아래로 펼쳐지게 만들어보자.
```css
.list-group {
height: 0;
overflow: hidden;
transition: height 2s;
}
.lg-open{
height: 250px;
}
```
```html
```
{% embed url="" %}
CSS3 애니메이션 예시
{% endembed %}
{% embed url="" %}