css 애니메이션2 [CSS animation] 트랜지션 (transition) 안녕하세요 PNcoding입니다 :) 오늘은 트랜지션(transition)에 대하여 알아보도록 하겠습니다. 트랜지션과 유사하지만 다르게 움직임을 표현해 주는 속성인 애니메이션에 대하여 궁금하신 분은 여기를 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/4 [CSS animation] css 애니메이션 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS 애니메이션에 대해 알아볼게요! CSS 애니메이션은 다양한 속성이 있는데, 속성이 너무 많다 보니 어떻게 사용하지는지, 언제 어떻게 적용하는지 pncoding.tistory.com 트랜지션은 css의 속성을 변경할 때 시간값을 부여하여 부드럽게 움직임을 구현시켜 줄 수 있습니다. 예를 들면 네이버의 메인의 이미지들.. 2023. 11. 14. [CSS animation] css 애니메이션 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS 애니메이션에 대해 알아볼게요! CSS 애니메이션은 다양한 속성이 있는데, 속성이 너무 많다 보니 어떻게 사용하지는지, 언제 어떻게 적용하는지 헷갈리는 경우가 있죠. 어떤 속성이 있는지 한번 정리해봅시다! 1. HTML 구조 간단하게 클래스 명이 box인 태그를 만들어 볼게요. 2. CSS 가로, 세로 300 x 300 크기의 배경 색상이 들어가게 만들었습니다. 브라우저 결과 화면 그럼 애니메이션을 적용하기 위해 어떤 속성이 있는지 확인해 봅시다 1. animation-name .box { width: 300px; height: 300px; background-color: salmon; animation-name: box_ani; } 애니메이션을.. 2023. 2. 26. 이전 1 다음 반응형
