CSS Transition 속성

1. opacity 속성

• HTML 요소의 투명도를 조절하는 속성
• 0 ~ 1 실수 입력(0.5 반투명 효과)

.box {
  opacity : 0
}

 

 

2. transition 속성

• transition을 부여하면 CSS가 변할 때 서서히 변경되는 효과가 생김
• all 은 모든 스타일, 1s는 1초 동안 변화

.box {
  opacity : 0;
  transition : all 1s;
}

 

 

3. one-way 애니메이션 만드는 TIP

• 시작 스타일 정하기
• 최종 스타일 정하기
• 트리거 주기 정하기
• transition으로 서서히 동작 만들기