CSS: 애니메이션 vs.전이
그래서 저는 CSS3 전환과 애니메이션을 모두 수행하는 방법을 이해합니다.제가 구글 검색을 통해 명확하지 않은 것은 어떤 것을 사용해야 하는지입니다.
예를 들어, 제가 공을 튀기고 싶다면 애니메이션이 가야 할 길임이 분명합니다.저는 키 프레임을 제공할 수 있었고 브라우저는 중간 프레임을 수행할 수 있었고 저는 멋진 애니메이션을 진행할 것입니다.
그러나 어떤 방법으로든 해당 효과를 얻을 수 있는 경우가 있습니다.간단하고 일반적인 예로는 Facebook 스타일의 슬라이딩 드로어 메뉴를 구현할 수 있습니다.
이러한 효과는 다음과 같은 전환을 통해 얻을 수 있습니다.
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}
또는 다음과 같은 애니메이션을 통해:
.sf-page {
-webkit-animation-duration: .4s;
-webkit-transition-timing-function: ease-out;
}
.sf-page.in {
-webkit-animation-name: sf-slidein;
-webkit-transform: translate3d(0, 0, 0);
}
.sf-page.out {
-webkit-animation-name: sf-slideout;
-webkit-transform: translateX(240px);
}
@-webkit-keyframes sf-slideout {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(240px, 0, 0); }
}
@-webkit-keyframes sf-slidein {
from { -webkit-transform: translate3d(240px, 0, 0); }
to { -webkit-transform: translate3d(0, 0, 0); }
}
다음과 같은 HTML의 경우:
<div class="sf-container">
<div class="sf-page in" id="content-container">
<button type="button">Click Me</button>
</div>
<div class="sf-drawer">
</div>
</div>
그리고 이와 함께 제공되는 jQuery 스크립트는 다음과 같습니다.
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});
제가 이해하고 싶은 것은 이러한 접근법의 장단점이 무엇인지입니다.
- 한 가지 분명한 차이점은 애니메이션은 훨씬 더 많은 코드를 필요로 한다는 것입니다.
- 애니메이션은 더 나은 유연성을 제공합니다.밖으로 미끄러져 나가는 것과 안으로 들어가는 것에 대해 다른 애니메이션을 가질 수 있습니다.
- 성능에 대해 말할 수 있는 것이 있습니까?둘 다 하드웨어 가속을 이용합니까?
- 어느 쪽이 더 현대적이고 앞으로 나아가는 길인가요?
- 더 하실 말씀 있으세요?
당신은 그것들을 하는 방법에 대한 핸들을 가지고 있는 것처럼 보입니다. 단지 언제 그것들을 해야 하는지가 아닙니다.
전환은 시작 상태와 종료 상태의 두 가지 다른 상태 사이에서 수행되는 하나의 애니메이션입니다.드로어 메뉴와 마찬가지로 시작 상태가 열려 있고 종료 상태가 닫혀 있거나 그 반대일 수 있습니다.
시작 상태와 종료 상태를 특별히 포함하지 않는 작업을 수행하거나 전환 중인 키 프레임에 대한 보다 세밀한 제어가 필요한 경우 애니메이션을 사용해야 합니다.
메리엄-웹스터에 따르면 정의가 스스로 설명되도록 하겠습니다.
전환:한 형태, 단계 또는 스타일에서 다른 형태, 단계 또는 스타일로의 이동, 개발 또는 진화
애니메이션:생명이나 삶의 질을 부여받은; 움직임으로 가득 찬.
CSS에서 그들의 목적에 적절하게 맞는 이름들.
따라서 제시한 예제는 한 상태에서 다른 상태로 변경될 뿐이므로 전환을 사용해야 합니다.
더 짧은 답변, 단도직입적으로 대답합니다.
전환:
- 트리거 요소가 필요합니다(:호버, :focus 등).
- 애니메이션 상태 2개만(시작 및 종료)
- 간단한 애니메이션(버튼, 드롭다운 메뉴 등)에 사용됩니다.
- 제작은 쉽지만 애니메이션/효과 가능성은 그리 많지 않음
애니메이션 @키프레임:
- 무한한 애니메이션에 사용할 수 있습니다.
- 세 개 이상의 상태를 설정할 수 있습니다.
- 경계 없음
둘 다 CPU 가속을 사용하여 훨씬 더 부드러운 효과를 제공합니다.
애니메이션은 동일한 전환을 반복적으로 사용하지 않는 한 훨씬 더 많은 코드가 필요하며, 이 경우 애니메이션이 더 좋습니다.
애니메이션 없이 미끄러져 들어가거나 나가거나 할 때 다른 효과를 얻을 수 있습니다.원래 규칙과 수정된 규칙 모두에서 다른 전환을 수행합니다.
.two-transitions { transition: all 50ms linear; } .two-transitions:hover { transition: all 800ms ease-out; }애니메이션은 전환 과정의 추상화에 불과하므로 전환이 하드웨어적으로 가속화되면 애니메이션이 활성화됩니다.그것은 아무런 차이가 없습니다.
둘 다 매우 현대적입니다.
제 경험칙은 동일한 전환을 세 번 사용하면 애니메이션이어야 한다는 것입니다.이것은 앞으로 유지보수 및 변경하기가 더 쉽습니다.하지만 만약 여러분이 그것을 한 번만 사용한다면, 애니메이션을 만드는 것은 더 많은 타이핑이고 아마도 그럴 가치가 없을 것입니다.
성능에 대해 말할 수 있는 것이 있습니까?둘 다 하드웨어 가속을 이용합니까?
최신 브라우저에서는 속성에 대해 h/w 가속이 발생합니다.filter,opacity그리고.transform이것은 CSS 애니메이션과 CSS 전환 모두를 위한 것입니다.
애니메이션은 단지 속성 집합의 부드러운 동작일 뿐입니다.즉, 요소의 속성 집합에 대해 수행할 작업을 지정합니다.애니메이션을 정의하고 애니메이션 프로세스 중에 이 속성 집합이 어떻게 작동해야 하는지 설명합니다.
다른 쪽의 전환은 속성(또는 속성)이 변경을 수행하는 방법을 지정합니다.각각의 변화.JavaScript 또는 CSS를 사용하여 특정 속성에 대한 새 값을 설정하는 것은 항상 전환이지만 기본적으로 원활하지 않습니다.설정별transitionCSS 스타일에서는 이러한 변경을 수행하기 위한 다른 방법을 정의합니다.
전환은 지정된 속성이 변경될 때마다 수행되어야 하는 기본 애니메이션을 정의한다고 할 수 있습니다.
.yourClass {
transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}
.yourClass:hover {
color: #f00;
}<p class="yourClass"> Hover me </p>CSS3Transitions프론트엔드 개발자는 상태 변화와 관련하여 요소의 모양과 동작을 수정할 수 있는 상당한 기능을 제공했습니다.CSS3animations이 기능을 확장하고 여러 키 프레임에서 요소의 모양과 동작을 수정할 수 있습니다.transitions상태로 , 그 에서 다른 상태로 변화하는 능력을 제공합니다.animations는 서로 다른 키 프레임 내에서 여러 전환 지점을 설정할 수 있습니다.
이제, 2점의 전환을 적용한 이 전환 샘플을 살펴봅시다, 시작점은left: 0 는트포인에서 .left: 500px
.container {
background: gainsboro;
border-radius: 6px;
height: 300px;
position: relative;
}
.ball {
transition: left 2s linear;
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
left: 0px;
}
.container:hover .ball{
left: 500px;
}<div class="container">
<figure class="ball"></figure>
</div>위의 내용은 다음을 통해 작성할 수도 있습니다.animation 예:
@keyframes slide {
0% {
left: 0;
}
100% {
left: 500px;
}
}
.container {
background: gainsboro;
border-radius: 6px;
height: 200px;
position: relative;
}
.ball {
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.container:hover .ball {
animation: slide 2s linear;
}<div class="container">
<figure class="ball"></figure>
</div>그리고 만약 우리가 또 다른 중간 지점을 원한다면, 오직 다음을 통해서만 달성하는 것이 가능할 것입니다.animation하나 더 추가할 수 있습니다.keyFrame하기 위해서 이 이를달기그이힘진다입니정한것이리고위해의 입니다.animation1파운드가 transition:
@keyframes slide {
0% {
left: 0;
}
50% {
left: 250px;
top: 100px;
}
100% {
left: 500px;
}
}
.container {
background: gainsboro;
border-radius: 6px;
height: 200px;
position: relative;
}
.ball {
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.container:hover .ball {
animation: slide 2s linear;
}<div class="container">
<figure class="ball"></figure>
</div>전환은 중간에서 반대로 진행될 수 있지만 애니메이션은 키 프레임을 처음부터 끝까지 재생합니다.
const transContainer = document.querySelector(".trans");
transContainer.onclick = () => {
transContainer.classList.toggle("trans-active");
}
const animContainer = document.querySelector(".anim");
animContainer.onclick = () => {
if(animContainer.classList.contains("anim-open")){
animContainer.classList.remove("anim-open");
animContainer.classList.add("anim-close");
}else{
animContainer.classList.remove("anim-close");
animContainer.classList.add("anim-open");
}
}*{
font: 16px sans-serif;
}
p{
width: 100%;
background-color: #ff0;
}
.sq{
width: 80px;
height: 80px;
margin: 10px;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
}
.trans{
transition: width 3s;
}
.trans-active{
width: 200px;
}
.anim-close{
animation: closingAnimation 3s forwards;
}
.anim-open{
animation: openingAnimation 3s forwards;
}
@keyframes openingAnimation {
from{width: 80px}
to{width: 200px}
}
@keyframes closingAnimation {
from{width: 200px}
to{width: 80px}
}<p>Try click them before reaching end of movement:</p>
<div class="sq trans">Transition</div>
<div class="sq anim">Animation</div>또한 Javascript에서 전환 종료를 수신하도록 하려면 변경하는 각 속성에 대해 이벤트를 하나씩 얻을 수 있습니다.예를들면transition: width 0.5s, height 0.5s . . . . . . . . . . . . . . . . . ..transitionend이벤트는 너비와 높이에 대해 하나씩, 두 번 트리거됩니다.
요약하자면, 이 게시물 덕분에 CSS 전환과 CSS 애니메이션 사이에는 5가지 주요 차이점이 있습니다.
1/ CSS 전환:
- 브라우저를 통해 한 상태에서 다른 상태로 개체 애니메이션 만들기
- 루프할 수 없음
- 실행하려면 트리거가 필요합니다(:hover, :focus).
- 단순하고 코드 수가 적으며 성능이 제한됨
- JavaScript에서 작업하기 쉽습니다.
2/ CSS 애니메이션:
- 다양한 속성과 시간 범위로 여러 상태를 자유롭게 전환할 수 있습니다.
- 루프 가능
- 외부 트리거가 필요하지 않습니다.
- 복잡성, 코드 및 유연성 향상
- 키 프레임을 조작하는 구문으로 인해 JavaScript에서 작업하기 어려움
나는 CSS3 애니메이션 대 CSS3 전환이 당신이 원하는 답을 줄 것이라고 믿습니다.
다음은 기본적으로 몇 가지 유용한 사항입니다.
- 성능이 문제라면 CSS3 전환을 선택합니다.
- 각 전환 후 상태를 유지하려면 CSS3 전환을 선택합니다.
- 애니메이션을 반복해야 하는 경우 CSS3 애니메이션을 선택합니다.애니메이션 반복 횟수를 지원하기 때문입니다.
- 복잡한 애니메이션을 원하는 경우.그렇다면 CSS3 애니메이션이 선호됩니다.
어느 것이 더 나은지 스스로를 괴롭히지 마세요.제가 드리고 싶은 말씀은, 만약 여러분이 코드 한 줄이나 두 줄로 문제를 해결할 수 있다면, 유사한 행동으로 이어질 코드 뭉치를 작성하는 것이 아니라 그냥 그렇게 하세요.어쨌든, 전환은 애니메이션의 하위 집합과 같습니다.이것은 단순히 전환이 특정 문제를 해결할 수 있는 반면 애니메이션은 모든 문제를 해결할 수 있다는 것을 의미합니다.애니메이션을 사용하면 0%에서 100%까지 각 단계를 제어할 수 있습니다. 이는 전환이 실제로 수행할 수 없는 작업입니다.애니메이션을 사용하려면 코드 묶음을 작성해야 하는 반면, 변환에서는 작업하는 내용에 따라 한 줄 또는 두 줄의 코드를 사용하여 동일한 결과를 수행합니다.자바스크립트의 관점에서, 전이를 사용하는 것이 가장 좋습니다.시작 및 종료 전환과 같은 두 단계만 관련된 모든 작업은 전환을 사용합니다.요약, 스트레스가 심하면 둘 다 비슷한 결과를 낼 수 있기 때문에 사용하지 마세요.
언급URL : https://stackoverflow.com/questions/20586143/css-animation-vs-transition
'programing' 카테고리의 다른 글
| Google Analytics에서 실시간 방문자 스크랩 (0) | 2023.09.04 |
|---|---|
| 파이썬에서 문자열 리터럴을 탈출하지 않고 작성하는 방법은 무엇입니까? (0) | 2023.09.04 |
| Django Rest Framework의 응답에 중간자(모델을 통해) 포함 (0) | 2023.09.04 |
| 원격 시스템에서 사용할 수 있는 파워셸 스크립트를 실행하는 방법은 무엇입니까? (0) | 2023.09.04 |
| 공백/빈 공간의 유효성을 검사하는 방법은 무엇입니까?[각도 2] (0) | 2023.09.04 |