transition과 JQuery의 Animate 차이점
CSS - transition
transition은 CSS 속성값으로 애니메이션 효과를 발생시킵니다
transition-property : 어떤 속성에 적용할지
transition-duration : 얼마동안 지속할지
transition-timing-function : 시간 함수, 효과
transition-delay : 얼마 후에 시작할지(딜레이)
-------------------------------------------------
transition-property: left;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0.7s;
다음과 같이 한줄로 줄여서 사용 가능합니다.
transition: left 1s ease 0.7s;
jQuery에서 animate는 javascript를 통해서 정해진 시간동안
CSS 속성을 변화시켜 애니메이션 효과를 발생시킵니다.
Transition과 Animate의 차이점
1. 적용가능 범위
-CSS transition 적용가능 범위-
background-color, background-position, border-bottom-color, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, border-spacing, border-top-color, border-top-width, bottom, clip, color, font-size, font-weight, height, left, letter-spacing, line-height, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-widthbackground-color, background-position, border-bottom-color, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, border-spacing, border-top-color, border-top-width, bottom, clip, color, font-size, font-weight, height, left, letter-spacing, line-height, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, outline-color, outline-width, padding-bottom, padding-left, padding-right, padding-top, right, text-indent, text-shadow, top, vertical-align, visibility, width, word-spacing, z-index
-JQuery animate 적용가능 범위-
backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent
CSS에 transition이 적용가능한 범위가 훨씬 더 많다.
2. 속도
jQuery는 자바스크립트 라이브러리이기 때문에 CSS 속성의 변화까지 많은 단계를 거칠 수 밖에 없습니다. 그러므로 transition이 가장 빠릅니다.
CSS <-- javascript <-- jQuery
3. 접근성
transition은 CSS3 속성으로 최소 브라우저 IE10 이상 되어야 지원합니다. jQuery는 IE 하위버전도 지원하는 크로스브라우징 코드가 들어가기 때문에 IE7에서도 문제없이 작동합니다. 굳이 따지자면 animate가 transition보다 접근성이 좋다고 볼 수 있습니다.