# transition

9개의 포스트

CSS transition

display: inline-block 에 관하여... inline-block 을 사용하면 요소의 너비와 높이를 설정할 수있다. 또한 위쪽 및 아래쪽 margin, padding 이 존중된다.(inline 은 그렇지 않다.) display: block; 과 비교했을 때

2020년 6월 28일
·
0개의 댓글
post-thumbnail

CSS Transition 속성에서 transition-timing-function 값에 따른 차이

transition: property name | duration | timing function | delayCSS Transition은 속성을 변경할 때 애니메이션의 속도를 제어합니다.즉, 즉시 변화가 일어나는 것 대신 일정 기간에 걸쳐 속성의 변화가 나타나게 됩니

2020년 6월 28일
·
0개의 댓글
post-thumbnail

CSS trasition

css transition 정리

2020년 4월 22일
·
0개의 댓글

CSS 자주 사용되는 속성

CSS의 자주 사용되는 속성 형태로 사용되며 여러 속성을 줄 때는 세미콜론(;)으로 구분한다. 구글크롬의 개발자모드(f12)를 사용하면 쉽다. width , height width(가로길이), height(세로길이)를 의미한다. inline 요소에서는 적용되지 않

2020년 3월 23일
·
0개의 댓글

[TIL] 29. CSS Transition

CSS Transition은 CSS의 속성을 변경할 때 변경 값이 즉시 바뀌는게 아니라 일정 시간 동안 일어나도록 조절해 마치 애니메이션처럼 보이도록 하는 것이다. CSS transitions는 어떤 속성을 움직이게 할지, 언제 애니메이션이 시작할지, 얼마나 지속할지

2020년 2월 29일
·
0개의 댓글
post-thumbnail

PROJ-FOODLY-DAY4 : 인풋 아웃라인, SCSS공유, transform & transition

프로젝트 4일차 인풋 아웃라인 제거 인풋창을 만들고 내용을 입력하려 커서로 클릭을 하면 파란 줄이 인풋창을 감싸게 된다. 이것을 outline 설정으로 제어할 수 있다. 해당선택자를 통해 인풋창에 아웃라인 속성을 none으로 설정했다. 매번 하는 설정인데 왜 매번

2020년 2월 27일
·
0개의 댓글

css - transition

css 프로퍼티를 변화시킬때 그 기간을 설정하여 동적인 효과를 내는 속성입니다. transition-property의 속성값에 all을 적으면 모든 변화를 transition에 적용합니다. 또한, 단일 속성만 transition 적용할 수도 있습니다. div위에 마우스를 올렸을때 width 변화만 transtion 적용한 예제 단계별로 transiti...

2019년 11월 20일
·
0개의 댓글
post-thumbnail

CSS Transform3D + Transition 활용 샘플

페이스북 UX/GUI 그룹에 마침 Transform3D 와 Transition을 활용해서 만들 수 있는 인터렉션 디자인 컨셉 질문이 들어와 답변과 함께 구현하였습니다. 원본 이미지는 dribbble.com 에 SANG NGUYEON 이라는 분의 컨셉 인터렉션 디자인 아트입니다. 원본 컨셉 아트는 동영상인 관계로 URL을 링크 합니다. https://d...

2019년 7월 22일
·
4개의 댓글

CSS Transition 활용 TIP (부드러운 움직임)

1) Transition 속성값의 변화 중간과정을 CSS가 만들어 부드러운 움직임을 나타내는 기능(IE 10+) 속성값이 변화하는 경우에만 동작하므로 html 샘플 확인 : https://natsgun.tistory.com/15 [개발자C군의 개발노트] 속성명을 입력하지 않거나 all 인 경우 모든 속성 변화하고 싶은 속성만 골라서 사용 ex) wid...

2019년 6월 10일
·
1개의 댓글