Transition
어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법
작성 방법은 아래를 참고하여 작성한다.
- 작성 시 state(
:)가 없는 요소에 붙여야 한다. - 태그 작성 후 변화를 줄 요소를 집어 넣는다.
(예시는background-color) - 변화를 줄 요소는 state가 있는 요소로 변한다.
- 변화를 줄 요소는 state가 붙은 태그에도 같은 속성이 존재해야한다.
- 얼마나 오래동안 변화가 일어나게 할지 정한다.(시간)
- 다수의 요소에 변화를 줄 경우 콤마(
,)를 이용해 작성한다. - 모든 요소에 변화를 줄 때에는
all을 이용해 작성한다.
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
**transition: background-color 10s ease-in-out, color 5s ease-in-out**;
}
a:hover {
color: tomato;
background-color: wheat;
}위 예시에서 사용한 속성값 중 ease-in-out이 있다.
이것은 브라우저에게 애니메이션이 어떻게 변할지 알려주는 값이다.
속성값은 다음과 같다.
- linear
- ease(기본값)
- ease-in
- ease-out
- ease-in-out
- cubic-bezier()
cubic-bezier은 아래 링크를 통해 시뮬레이션 후 값을 가져올 수 있다.
Transformation
CSS를 이용해 크기를 키우거나 3D축 기준 회전, 위치 이동등 변형이 가능한,
말 그대로 요소를 변형 시킬수 있다.
작성 방법은 아래를 참고하여 작성한다.
- 다른 요소의 Box를 변형시키지 않는다.
(다른 요소위에 겹쳐질 수 있으며margin,padding이 적용되지 않는다.) - Transformation이 적용되지 않은 요소는
Transformation이적용된 요소가 어디서 보여지든
원래 있던 자리에 있다고 인식된다.
(Box차원에서 일어나지 않는다.) - 다른 변화요소 여러개를 조합해 사용할 수있다.
(transition,animation,transform)
부모 요소에transition이 적용되어있지 않으면transform이 작동하지 않는다.
<body>
<img src="image/image.jpg" />
<span> Rode to CSS </span>
</body>img {
border: 10px solid black;
border-radius: 50%;
transition: transform 5s ease-in-out;
}
img:hover {
transform: rotateZ(90deg)
}transform에 적용 가능한 속성값은 MDN에서 확인할 수 있다.
Animation
특정 상황에만 재생되는 애니메이션이 아닌
자동으로 재생되는 애니메이션을 만들때 사용한다.
작성 방법은 아래를 참고하여 작성한다.
- 작성할 때는 @keyframes를 작성하여 애니메이션을 정의한다.
이때 @keyframes의 앞에는 임의의 이름을 같이 적어준다.
(@keyframes Animation-name) - 작성에는 두가지 옵션이 존재한다.
- 첫번째는 어느 한 지점부터 다른 한 지점까지
재생되는 애니메이션 (form~to) - 두번째는 진행도에 따라 재생되는 애니메이션 (0%~100%)
진행 스탭을 많이 만들수 있기 때문에 자주 사용된다. - 정의한 재생 방식을 적용할 태그에 작성한다.
- 태그의 작성 순서는 다음과 같다
(@keyframes이름, 재생시간, 재생과정, 반복횟수)
<body>
<img src="image/image.jpg" />
<span> Rode to CSS </span>
</body>@keyframes RodetoAnimation {
0% {
transform: rotateY(0);
}
50% {
transrform: rotateY(-180deg);
}
100% {
transform: rotateY(360deg);
}
}
img {
border: 10px solid black;
border-radius: 50%;
animation: RodetoAnimation 2s ease-in-out infinite;
}transform으로 만든 애니메이션 예제를 볼수있는 사이트
Animista
애니메이션 사용 시 알아두면 좋은 것들
- 애니메이션이 끝났을 때 반복되지 않고 끝에 넣은 값을 유지하고 싶다면
forward를 넣으면된다. - 반대로 애니메이션이 반복되었으면 한다면
infinite를 넣으면된다. - 애니메이션이 기다렸다 재생되게 만들고 싶다면
animation-delay를 사용한다 - 애니메이션이 불안정하게 재생된다면
will-change태그를 사용한다.
속성값으로는 변형되는 값을 입력하면 된다 (transform)
이 태그를 이용하면 브라우저에서
그래픽카드를 이용해 애니메이션을 재생 시킨다.
안녕하세요