본문 바로가기

css 공부3

[css] animation 속성 animation 모든 애니메이션 속성을 적용한다. animation-delay 애니메니션 발생 후 몇 초 후에 재생할지 지정한다. animation-direction 애니메이션이 순환할 때 진행 방향을 설정한다. [animation-direction 속성 값] normal : 시작 위치에서 다시 시작한다.(정방향) - 기본 값 {시작-> 종료, 시작->종료} reverse : 종료 위치에서 다시 시작한다. (역방향){종료->시작,종료->시작} alternate : 애니메이션이 종료 위치에 도착하면 종료 시점에서 시작 시점까지 반복한다 (정방향 반복){시작->종료,종료 -> 시작} alternate-reverse 애니메이션이 종료 위치에서 시작하며 시작 시점에 도착 하면 시작 시점에서 종료 시점 까지 반.. 2021. 1. 31.
[css] transition 속성 transition 모든 transtion 속성을 한 번에 사용한다. [transition 단축 문법] transition :(property) (duration) (timin-function) (delay); transition-delay 이벤트 발생 후 몇 초 후에 재생할지 지정한다 transition-duration 몇 초 동안 재생할지 지정한다. transition-property 어떤 속성을 변형할지 지정한다. [transition-property 속성 값] all - {transition: all 3s;}모든 속성 값에 전환 효과를 추가한다. 한 가지 속성 값만 추가 할 경우 - {transition : width 2s ;} 여러 가지 속성 값 추가 할 경우 - {transiotn :width.. 2021. 1. 31.
시작 문자(첫 번째 문자 선택, 첫 번째 문자 라인 선택) 시작 문자 선택자 ::first-letter : 첫 번째 글자를 선택 ::first-line : 첫 번째 줄을 선택 See the Pen Starting text by onion (@saetmlda) on CodePen. 2020. 12. 20.