css로도 약간의 애니메이션 효과를 넣을 수 있다는 사실
알고 계셨나요?
transition을 이용하면 제이쿼리가 없어도
동적인 홈페이지를 만들 수 있답니다.
1. 예시
① 사례
- 어떤 느낌인지 보여드리기 위해서 작업 중인 페이지의 애니메이션을 찍어봤어요.
- 마우스를 올렸을 때 나오는 검은색 배경이 팍 나오지 않고 천천히 나오는 것을 알 수 있죠?
- 잘 모르겠다고 해도 괜찮아요. transition을 적용하지 않았을 때와 비교해드릴 테니 걱정하지 마세요!
2. transition이 없을 때
① 기본 살펴보기
- 기본적으로 hover를 이용해 애니메이션을 만들어본 것입니다.
- 정적인 홈페이지보다는 낫지만 그래도 아직 부족한 느낌이 들어요.
- 팍 튀어나오지 말고 천천히 나타났으면 합니다.
3. transition 적용
① 적용 예시
- 일단 예시를 보여드리고 설명해드릴게요.
- 버튼에 마우스를 올려보시면 위에서와는 다르게 천천히 나타나는 것이 보이시나요?
① transition
- 코드 펜 코드로 설명을 드리자면 [transition: all 1s;] 코드를 애니메이션을 주고 싶은 곳에 추가해주시면 됩니다.
- all은 transition 속성 전부에 적용을 하겠다는 의미인데 어떤 속성들이 있는지 파고들면 어려워지니까 다음 시간에 자세히 다뤄보도록 하고 오늘은 넘어갈게요.
- 1s는 1초 동안 이라는 의미입니다. 1초 동안 애니메이션이 시작해서 끝나는 걸 의미해요. 짧게 하고 싶으면 0.5s처럼 소수점으로 적어주세요.
② 주의점
- 제가 실수로 위에서는 display:none을 적용했었는데요. 그렇게 하면 transition이 적용되지 않습니다.
- 이럴 땐 opacity를 이용해주세요.
contact
:: www.instagram.com/draw_wool/
:: www.pinterest.co.kr/draw_wool/_created/
:: grafolio.naver.com/draw_wool
[같이 보면 좋은 글]
[coding/html + css] - [sass/scss] 변수 사용법
[sass/scss] 변수 사용법
scss의 가장 큰 장점은 css와는 달리 변수 선언이 가능하다는 점이 아닐까 싶어요. 변수만 가능해도 유지보수가 한결 수월해지죠. 1. 변수 선언 ① 변수 - 변수 선언 방법은 [$변수 명: 변수 값] 형태
ssimplay.tistory.com
[coding/html + css] - [css] 미디어쿼리 max-width 사용시 주의점
[css] 미디어쿼리 max-width 사용시 주의점
지난 포스팅에 이어서 max-width에 대해 주의해야 할 점을 몇 가지 적어보겠습니다. 1. 적용 영역 ① 최댓값 - 미디어쿼리에서 max-width를 설정한다는 것은 0부터 설정값까지 적용을 시키겠다고 하는
ssimplay.tistory.com
그럼 이만.
총총.
'coding > html + css' 카테고리의 다른 글
| scss를 위해 컴파일러를 설치해보자 (0) | 2021.09.24 |
|---|---|
| Ruby 언어 설치하고 scss 시작하기 (0) | 2021.09.23 |
| [sass/scss] 반복 스타일 한 번에 쓰기 (0) | 2021.09.07 |
| [sass/scss] 변수 사용법 (2) | 2021.09.02 |
| [css] 미디어쿼리 max-width 사용시 주의점 (4) | 2021.07.19 |
