[css] CSS : 애니메이션과 전환

CSS3 전환과 애니메이션을 모두 수행하는 방법을 알고 있습니다. 명확하지 않은 것은 내가 구글에서봤을 때 어느 것을 사용 해야하는지입니다.

예를 들어, 볼 바운스를 만들고 싶다면 애니메이션이 나아갈 길이라는 것이 분명합니다. 키 프레임을 제공 할 수 있고 브라우저는 중간 프레임을 수행 할 것이고 멋진 애니메이션을 만들 것입니다.

그러나, 상기 효과가 어느 방식 으로든 달성 될 수있는 경우가있다. 간단하고 일반적인 예는 페이스 북 스타일 슬라이딩 드로어 메뉴를 구현하는 것입니다.

이 효과는 다음과 같은 전환을 통해 달성 할 수 있습니다.

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

또는 다음과 같은 애니메이션을 통해 :

.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); }
}

http://jsfiddle.net/4Z5Mr/

다음과 같은 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");
});

내가 이해하고 싶은 것은 이러한 접근 방식의 장단점입니다.

한 가지 분명한 차이점은 애니메이션이 훨씬 더 많은 코드를 사용한다는 것입니다.
애니메이션은 더 나은 유연성을 제공합니다. 슬라이딩 및 인에 대한 다른 애니메이션을 가질 수 있습니다
성능에 대해 말할 수있는 것이 있습니까? 둘 다 하드웨어 가속을 활용합니까?
더 현대적이고 앞으로 나아갈 길
추가 할 수있는 것이 있습니까?

답변

언제해야하는지가 아니라 어떻게해야 하는지를 다루는 것처럼 보입니다.

전환 은 애니메이션으로 , 시작 상태와 종료 상태의 두 가지 상태 사이에서 수행 되는 애니메이션 입니다. 서랍 메뉴와 같이 시작 상태는 열리고 종료 상태는 닫힐 수 있으며 그 반대도 마찬가지입니다.

시작 상태 및 종료 상태와 관련 이없는 작업을 수행 하거나 전환에서 키 프레임을보다 세밀하게 제어해야하는 경우 애니메이션을 사용해야합니다.

답변

Merriam-Webster에 따라 정의 자체를 말하도록하겠습니다.

전환 : 한 형태, 단계 또는 스타일에서 다른 형태로의 이동, 개발 또는 진화

생기 : 삶 또는 삶의 질을 부여 받음; 운동의 전체

이름은 CSS에서 목적에 적절하게 맞습니다.

따라서 여러분이 제공 한 예제는 한 상태에서 다른 상태로만 변경되기 때문에 전환을 사용해야합니다.

답변

바로 대답하자면 :

전이:

트리거 요소가 필요합니다 (: hover, : focus 등).
애니메이션 상태 2 개만 (시작 및 종료)
간단한 애니메이션 (버튼, 드롭 다운 메뉴 등)에 사용
더 쉽게 만들 수 있지만 너무 많은 애니메이션 / 효과 가능성

애니메이션 @ 키 프레임 :

끝없는 애니메이션에 사용할 수 있습니다
2 개 이상의 상태를 설정할 수 있습니다
경계 없음

둘 다 훨씬 더 부드러운 효과를 위해 CPU 가속을 사용합니다.

답변

동일한 전환을 반복해서 사용하지 않으면 애니메이션에 더 많은 코드가 필요합니다.이 경우 애니메이션이 더 좋습니다.
애니메이션없이 슬라이딩에 대해 다른 효과를 가질 수 있습니다. 원래 규칙과 수정 된 규칙 모두에서 다른 전환을 수행하십시오.
```
.two-transitions {
    transition: all 50ms linear;
}

.two-transitions:hover {
    transition: all 800ms ease-out;
}
```
애니메이션은 전환의 추상화 일 뿐이므로 전환이 하드웨어 가속이면 애니메이션이됩니다. 차이가 없습니다.
둘 다 매우 현대적입니다.
경험상 같은 전환을 세 번 사용하면 애니메이션 일 것입니다. 향후 유지 관리 및 변경이 더 쉽습니다. 그러나 한 번만 사용하는 경우 애니메이션을 만들기 위해 더 타이핑하고 가치가 없습니다.

답변

애니메이션 은 단지 속성 집합의 원활한 동작입니다. 즉 , 요소의 속성 집합에 어떤 일 이 발생 해야하는지 지정 합니다. 애니메이션을 정의하고 애니메이션 프로세스 중에이 속성 집합이 어떻게 작동해야하는지 설명합니다.

다른 쪽의 전환 은 속성이 변경을 수행 하는 방법을 지정 합니다 . 각 변경. JavaScript 또는 CSS를 사용하여 특정 속성에 새 값을 설정하는 것은 항상 전환이지만 기본적으로 부드럽 지 않습니다. transitionCSS 스타일을 설정 하여 이러한 변경을 수행하는 다른 (부드럽게) 방법을 정의합니다.

전환 은 지정된 속성이 변경 될 때마다 수행되어야 하는 기본 애니메이션 을 정의 한다고 말할 수 있습니다 .

답변

성능에 대해 말할 수있는 것이 있습니까? 둘 다 하드웨어 가속을 활용합니까?

최신 브라우저에서는 H / W 가속 특성에 대해 발생 filter, opacity및 transform. 이것은 CSS 애니메이션과 CSS 전환 모두를위한 것입니다.

답변

.yourClass {
    transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}

.yourClass:hover {
    color: #f00;
}

<p class="yourClass"> Hover me </p>

스 니펫 확장