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. One obvious difference is that animating is taking a whole lot more code.
2. Animation gives better flexibility. I can have different animation for sliding out and in
3. Is there something that can be said about performance. Do both take advantage of h/w acceleration?
4. Which is more modern and the way going forward
5. Anything else you could add?

---

It looks like you've got a handle on how to do them, just not when to do them.

A transition is an animation, just one that is performed between two distinct states - i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.

If you want to perform something that does not specifically involve a start state and an end state, or you need more fine grain control over the keyframes in a transition, then you've got to use an animation.

---

I'll let the definitions speak for themselves (according to Merriam-Webster):

Transition: A movement, development, or evolution from one form, stage, or style to another

Animation: Endowed with life or the qualities of life; full of movement

The names appropriately fit their purposes in CSS

So, the example you gave should use transitions because it is only a change from one state to another

---

1. Animation takes a lot more code unless you're using the same transition over and over, in which case an animation would be better.

2. You can have different effects for sliding in and out without an animation. Just have a different transition on both the original rule and the modified rule:

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }
   

3. Animations are just abstractions of transitions, so if the transition is hardware accelerated, the animation will be. It makes no difference.

4. Both are very modern.

5. My rule of thumb is if I use the same transition three times, it should probably be an animation. This is easier to maintain and alter in the future. But if you are only using it once, it is more typing to make the animation and maybe not worth it.

---

A shorter answer, straight on point:

Transition:

1. Needs a triggering element (:hover, :focus etc.)
2. Only 2 animation states (start and end)
3. Used for simpler animations (buttons, dropdown menus and so on)
4. Easier to create but not so many animation/effect possibilities

Animation @keyframes:

1. It can be used for endless animations
2. Can set more than 2 states
3. No boundaries

Both use CPU acceleration for a much smoother effect.

---

Animations are just that - a smooth behavior of set of properties. In other words it specifies what should happen to a set of element's properties. You define an animation and describe how this set of properties should behave during the animation process.

Transitions on the other side specify how a property (or properties) should perform their change. Each change. Setting a new value for certain property, be it with JavaScript or CSS, is always a transition, but by default it is not smooth. By setting transition in the css style you define different (smooth) way to perform these changes.

It can be said that transitions define a default animation that should be performed every time the specified property has changed.

---

Is there something that can be said about performance. Do both take advantage of h/w acceleration?

In modern browsers, h/w acceleration occurs for the properties filter, opacity and transform. This is for both CSS Animations and CSS Transitions.

---

I believe CSS3 animation vs CSS3 transition will give you the answer you want.

Basically below are some takeaways :

1. If performance is a concern, then choose CSS3 transition.
2. If state is to be maintained after each transition, then choose CSS3 transition.
3. If the animation needs to be repeated, choose CSS3 animation. Because it supports animation-iteration-count.
4. If a complicated animation is desired. Then CSS3 animation is preferred.

참고URL : https://stackoverflow.com/questions/20586143/css-animation-vs-transition