728x90 반응형 transition2 CSS 개발자 수업 59일차 - animation, flex 1. animation 2. flex 1. animation [ 정의 ] - 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환 시켜준다. - 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임(@keyframe)들로 구성되어있다. - 트랜지션(transition)과 유사하지만, 훨씬 더 규모가 크고 복잡하며 다양한 기능을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다. [ 속성 ] 속성명 설명 animation-name 애니메이션의 중간상태를 지정하기 위한 이름을 정의한다. animation-duration 애니메이션의 적용 시간을 지정한다. animation-direction 애니메이션이 종료되고 진행 방향을 지정한다. animati.. 2021. 6. 21. CSS 개발자 수업 58일차 - transform, transition 1. transform 2. transition 1. transform [ 정의 ] - 요소의 위치, 크기, 회전, 비틀기(왜곡) 변형을 지정할 수 있다. - transform: 값; [ 값(함수) 종류 ] 이름 설명 translate() 위치 변형 (position: relative와 유사하다.) scale() 배율(크기) 변형 rotate() 회전 변형 skew() 왜곡 변형 [ 예제 1 ] 이동하는 상자(translate) 확대하는 상자(scale) 각도기 상자(rotate) 왜곡된 상자(skew) [ 예제 2 ] 2. transition [ 정의 ] - 수치형 속성값에 한해서 객체의 속성(상태값)이 변화되는 과정을 시간 순으로 보여주는 기술 - 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 .. 2021. 6. 20. 이전 1 다음 728x90 반응형
