📌속성 기입 순서 transtion: property duration timing-function delay 속성을 한 번에 정할 수 있다. 띄어쓰기로 구분하며, 숫자로 속성 값을 지정하는 숫자가 두 개인 경우 duration delay 순서로 속성값을 판단하고 하나의 값만 있는 경우 duration의 속성 값으로 지정된다.
실제 속성의 개수보다 많이 기술된 속성은 무시된다. 변환 시키고 싶은 속성이 여러개일 경우 덩어리로 묶고 ,(쉼표)로 나열한다.
/* 모든 속성을 변형하고싶은 경우 */
.box {
transition: all 3s ease-in-out 1s;
}
/* propertype에서 여러가지 나열하고 싶은 경우 */
.box {
transition-propertype: color, width, height;
}
/* 높이와 배경색만 변형하고싶은 경우 --> 이 때 배경색은 2초 지연 후 변경된다. */
.box {
transition: height 3s ease-in-out, background-color 1s linear 2s;
}
📌두 가지 값은 필수값 효과를 주고 싶은 속성명 효과의 지속 시간
📌📌transtion 발동 조건(CSS의 property 값이 변하는 조건) transtion 혼자서 발동하지 않는다. 그냥 CSS를 적용한다고 끝이 아니라 자바스크립트를 이용하거나 가상 클래스 선택자(hover)와 같은 추가적인 코드 작성이 필요하다.
transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 만약 트랜지션이 자동 발동(self-invoking transition)하도록 하고 싶다면 CSS 애니메이션을 사용하도록 한다.
transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다.
모든 CSS 속성이 transition으로 부드럽게 전환되는 것은 아니다. 주로 시각적 효과에 영향을 주는 속성들이 전환될 수 있다. (예: width, height, opacity, color 등)
transition은 자동화된 애니메이션을 생성하는 것보다는 간단한 상태 변화를 부드럽게 표현하기 위한 용도로 사용된다. 복잡한 애니메이션을 생성하려면 CSS의 @keyframes와 animation 속성을 활용해야 한다.
📌 기본 속성 값 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음
property
transition-property: none / all / property / initial / inherit
none : 모든 속성에 적용하지 않음
all : 모든 속성에 적용
property : 속성을 정한다. 여러 개의 속성을 지정할 경우 쉼표로 구분
지정하고자 하는 속성이름: 해당 속성에 효과가 적용
transition-property: width, background-color;
>> width와 background-color에만 애니메이션 효과가 적용된다는 의미
timing-function
효과의 속도를 나타내는 것으로 속도의 곡성을 제어하는 속성(linear은 ‘일정하게’라는 의미)
duration
transition-duration: time;
delay
transition-delay: time;
기본값은 0s
시간 단위는 초(s) 또는 1/1000초(ms)를 사용
1500ms = 1.5s / 500ms = 0.5s
transitionend / transitionstart
이벤트의 한 종류로 지정한 CSS의 전환이 완료된 후 / 전환 전 transitionend / transitionstart 이벤트로 작성한 함수가 실행된다.
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;
animation-name: 만들 animation에 대한 이름을 지어주는것으로, 임의로 작성가능
animation-duration: animation의 진행 시간을 지정
animation-timing-function: animation의 진행 속도를 지정
animation-delay: animation이 시작하기 전에 대기하는 시간을 지정
animation-iteration-count: animation의 반복 횟수 지정
animation-direction: animation의 진행 방향 지정
animation-fill-mode: animation을 마친 후 어떤 상태로 만들지 정함
animation-play-state: animation을 진행할지 멈출지 정함
📌Animation역시 한 줄로 정리가 가능하며 duration을 먼저 작성해준다.(duration delay / 하나일 경우 duration)
📌 기본 속성 값 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음
@keyframes
애니메이션을 재생할 각 프레임의 스타일을 정의하는 것으로 from 속성이나 0% 속성에 설정한 스타일에서 출발해 to 속성이나 100% 속성에 설정한 스타일로 점차 바뀌면서 애니메이션이 재생된다.
@keyframes name {
0% { ... }
n% { ... }
100% { ... }
}
@keyframes name {
from { }
to { }
}
keyframes 애니메이션을 적용할 요소의 animation-name을 정의하고 그 키프레임 코드 블럭에 재생할 프레임별 시간 비율을 작성한다.
name : 애니메이션의 이름을 정한다.
0% : 시작할 때의 모양을 정한다. 0% 대신 from을 사용해도 된다.
n% : n%일 때의 모양을 정한다.
0%와 100% 사이에는 여러 개의 중간 값(%)을 설정해 프레임을 작성할 수 있다.
100% : 끝날 때의 모양을 정한다. 100% 대신 to를 사용해도 된다.
name
이름을 정의해야 애니메이션을 재생(호출)할 수 있다.
⭕⭕
animation-name: name; /* 문자열로 시작하는 이름 */
animation-name: _name; /* 언더바(_)로 시작하는 이름 */
animation-name: -name; /* 하이픈(-)으로 시작하는 이름 */
❌❌
animation-name: 1name; /* 숫자로 시작하는 이름 */
animation-name: @name; /* 특수 문자로 시작하는 이름 */
transition 속성과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성이다.
transition 속성은 요소의 상태가 변해야 애니메이션을 실행한다.
animation 속성은 요소의 모양과 동작을 키프레임 단위로 변경할 수 있다. 키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.
transition 속성과 animation 속성의 가장 큰 차이는 transition 속성은 요소의 상태가 바뀌어야 바뀌는 상태를 애니메이션으로 표현하지만, animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다. 또한 @keyframes 속성으로 프레임을 추가할 수 있다.
