# 간단한 애니메이션 만들기
✨ 과제. 버튼 누르면 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="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://leeans-dev-book.gitbook.io/docs/lecture/javascript/undefined-1.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.