transition 속성값
2021. 7. 29. 17:30ㆍTIL/웹퍼블리셔취업과정
728x90
정해진 시간동안 요소에 속성값을 부드럽게 부드럽게 변화시키는 속성
transition 적용할 수 있는 속성
위치 - top, left, right, bottom
크기 - widht, height
박스속성 - margin, padding
테두리 속성 - border-width, border-radius, border-color
색상 - color, background-color
투명도 - opacity
변환속성 - transform
transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정
trainsition-duration : 이벤트를 몇 초동안 진행할지 지정
transition-property : 어떤 속성을 변형할지 지정
transition-timing-function : 수치 변형 함수 지정 - 가속도
linear: 처음부터 끝까지 일정한 속도
ease: 천천히 시작되어 빨라지다가 마지막에 다시 느려짐
ease-in: 전환효과가 천천히 시작
ease-out: 전환효과가 천천히 끝남
ease-in-out: 전환효과가 천천히 시작해서 천천히 끝남
cubic-bezier()
transition: property duration timing-function delay 순으로 작성
'TIL > 웹퍼블리셔취업과정' 카테고리의 다른 글
hover effect 연습 (0) | 2021.07.30 |
---|---|
hover effect 연습 (0) | 2021.07.29 |
absolute적용시에는 부모태그에 height값 넣어주기 (0) | 2021.07.28 |
반응형 사이트 만들기 - mediaquery (0) | 2021.07.27 |
css 한 줄이상 안보이게 하기 (0) | 2021.07.27 |