엘리스트랙 1주차 3번째 수업
transform 이란?
웹사이트의 특정 영역에서 오브젝트를 각도를 튼다거나 크기, 위치를 변경할 때 사용하는 속성
transform 사용시 하위버전 브라우저에서도 실행을 원할 경우 prefix 접두사를 사용해야한다.
transform이 css3의 최신 언어이기 때문에 익스플로러 하위버전에서는 사용이 불가하다.
prefix 사용시 각 브라우저의 하위버전에도 동작한다.
-webkit- 크롬, 사파리
-moz- 파이어폭스
-ms- 익스플로러9.0
-o- 오페라
ex.
.transition {
-webkit-transform: translate(100px, 200px);
-moz-transform: translate(100px, 200px);
-ms-transform: translate(100px, 200px);
-o-transform: translate(100px, 200px);
}
transition이란?
특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용
전환이 일어날 요소들을 작성해주는 것
.transition { transition: width 2s linear 1s; }
transiton의 속성을 통해 조건을 먼저 작성한다.
.transition:hover { width: 300px; }
또한, 보통 transition을 사용할 때 가상선택자 hover와 쌍을 이루어사용하게 된다.
가상선택자를 통해 마우스가 올려졌을 때 transiton 적용되도록하여 transition을 통해 변화될 내용을 작성한다.
각각 속성을 따로 입력할 수도 있고 한줄로 작성할 수도 있다.
.transition {
transition: width 2s linear 1s;
}
.transition:hover {
width: 300px;
}
위 예시에서는 마우스를 올리면 1초 후에 width 값이 300px로 2초동안 속도 일정하게 변하는 효과가 발생하는 설정이다.
transition: all 1s;
property속성을 all로 사용하면 선택자의 모든 css속성값들에 transition효과를 적용된다.
.transition {
transition: background-color 1s;
}
p:hover {
background-color: #8683bd;
}
위 예시에서의 조건은 배경색에 transition효과를 줄 것이고(property속성에 해당)
1초동안 지속할 것(duration 속성에 해당)이라고 작성되었다.
또한 p영역에 마우스를 올렸을 때 배경컬러가 변경되는 설정이다.
animation: changewith 3s linear 1s 6 alternate;
위와 같이 한줄로 작성 가능하다.
순서는 상관 없지만 예외적으로 시간(duration, delay)은 먼저 나오는 게 duration이다.
animation은 항상 @keyframes를 같이 설정해줘야 한다.
[형식]
@keyframes animation-name {
from {
transition 시작 지점의 css속성
}
to {
transition 끝 지점의 css속성
}
ex.
.box1 {
width: 300px;
height: 300px;
background-color: red;
animation: roatation 1500ms linear infinite alternate;
}
@keyframes rotation {
from {
transform: rotate(-10deg);
}
to {
transform: rotate(10deg);
}
}
*만약 prefix가 달려있는 애니메이션을 작성한다면
keyframes도 prefix달아줘야하고 keyframes 내에 css 속성 앞에도 prefix를 달아줘야한다.
여러 prefix를 작성한다면 각각의 keyframe를 작성하여 연동해줘야한다.