[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");
});

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

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

답변

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

.yourClass:hover {
    color: #f00;
}

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