18. Animation
Animation 을 만드는 CSS 속성
Transition
transition-delay
transition-duration
transition-property
transition-timing-function
CSS Code
div#aniBox {
}
: 0.5s;
: 2s;
: transform;
: ease;
transition : transform 2s ease 1s;
div#aniBox {
}
2 State Animation
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions자세한 내용은 여기서!
13년 5월 16일 목요일
19. Animation 을 만드는 CSS 속성
Animation
Transition
2 State Animation
timing-function : Animation 의 속도 변화를 결정!
linear ease ease-in ease-out
step-start
cubic-bezier(0.1, 0.7, 1.0, 0.1)
step-end steps(4, end)
ease-in-out
13년 5월 16일 목요일
20. Animation 을 만드는 CSS 속성
Animation
Transition
2 State Animation
timing-function : Animation 의 속도 변화를 결정!
linear ease ease-in ease-out
아직 와닿지 않는다. 더 자세히 살펴보자!
http://cubic-bezier.com/
13년 5월 16일 목요일
22. Animation 을 만드는 CSS 속성
Animation
Multiple States
Transition
from { top: 0; left: 0;}
CSS Code
@keyframes
}
moveBox {
25% { top: 200px; left: 0; }
50% { top: 200px; left: 200px; }
75% { top: 0; left: 200px;}
to { left: 500px; top: 400px;}
13년 5월 16일 목요일
23. Transition
Animation 을 만드는 CSS 속성
Animation
Multiple States
CSS Code
animation-name
animation-duration
animation-timing-function
animation-delay
div#aniBox {
}
: moveBox;
: 4s;
: linear;
: 0.5s;
animation-iteration-count
animation-direction
: infinite;
: normal;
from { top: 0; left: 0;}
@keyframes
25% { top: 200px; left: 0; }
50% { top: 200px; left: 200px; }
75% { top: 0; left: 200px;}
to { left: 500px; top: 400px;}
moveBox {
}
animation
div#aniBox {
: moveBox 4s linear 0.5s infinite
}
https://developer.mozilla.org/ko/docs/CSS/Using_CSS_animations자세한 내용은 여기서!
13년 5월 16일 목요일
24. Transition
Animation 을 만드는 CSS 속성
Animation
Multiple States
animation-direction : Animation 재생 방향을 결정
예제로 살펴보자!
http://jsbin.com/ehicim/17/edit
13년 5월 16일 목요일
37. CSS Animation 을 만드는 방법
Only CSS with Javascript
13년 5월 16일 목요일
38. CSS Animation 을 만드는 방법
가상 클래스(pseudo-classes) 활용
background-color: blue;
.myButton :hover {
}
.myButton :active {
}
transform: scale(0.8, 0.8);
.myButton {
background-color: skyblue;
}
transition: background 0.5s transform 0.5s;
example-button
Only CSS with Javascript
13년 5월 16일 목요일
39. CSS Animation 을 만드는 방법
요소가 렌더링된 후 바로 재생
animation: bounce 1.5s infinite alternate;
.bounce {
}
@keyframes bounce {
}
from { top: 400px; }
example-bounce
to { top: 100px; }
...
Only CSS with Javascript
13년 5월 16일 목요일
40. CSS Animation 을 만드는 방법
장점
CSS 만으로 깔끔하게 정리
단점
가상클래스의 한계 (일부 요소에만 적용 가능)
다양한 사용자의 이벤트에 대응 불가
Only CSS with Javascript
적용대상
발생 가능한 이벤트가 간단한 요소
정해진 규칙대로 재생되는 애니메이션
쉽다!
13년 5월 16일 목요일
41. CSS Animation 을 만드는 방법
Only CSS with Javascript
CSS Class 조작
$(‘#moveButton’).click(function() {
$(‘#aniBox’).addClass(‘move’);
});
@keyframes moveBox {
....
}
#aniBox.move {
animation: moveBox 4s;
}
example-MoveBox
13년 5월 16일 목요일
42. CSS Animation 을 만드는 방법
Only CSS with Javascript
Inline style 조작
$(‘#title’).css({
transition: ‘opacity 1s‘
opacity: 1
});
#title {
opacity: 0;
}
example-TitleFadeInOut
13년 5월 16일 목요일
43. CSS Animation 을 만드는 방법
Only CSS with Javascript
다양한 Animation Event 활용
animationstart
animationend
animationiteration
transitionend
https://developer.mozilla.org/ko/docs/DOM/AnimationEvent
자세한 내용은 여기서!
https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/transitionend
13년 5월 16일 목요일
44. CSS Animation 을 만드는 방법
Only CSS with Javascript
장점
다양한 사용자 이벤트에 대한 처리 가능
단점
CSS 와의 애매한 분리
적용대상
다양한 사용자 이벤트에 반응해야 하는 UI Component
복잡한 애니메이션 적용 가능
다소 복잡한 애니메이션
13년 5월 16일 목요일
46. 성능 개선 작업 편의성 브라우저 호환
나의 경험에서 우려내는 Tip!
13년 5월 16일 목요일
47. 나의 경험에서 우려내는 Tip!
타겟 브라우저의 하드웨어 가속 지원 요소를 반드시 확인!
같은 역할은 하는 요소간 성능 비교
동시에 재생되는 Animation 수
요소의 컨텐츠 양 (이미지, 텍스트)
Effect 가 많이 적용된 요소
성능 저하 유발 요인
성능 향상을 위한 준비 작업
애니메이션 시나리오 확인
성능 개선 작업 편의성 브라우저 호환
13년 5월 16일 목요일
48. 나의 경험에서 우려내는 Tip!
자주 사용되는 Animation 패턴 메서드화
Animation Lock 기능
Animation Event 처리 기능
Vendor prefix 자동 추가 기능
대상 Element 에 inline 스타일을 적용 기능
Animation Helper API 를 사용하자
이외 필요한 여러가지 기능들..
성능 개선 작업 편의성 브라우저 호환
Transit (jQuery PlugIn)참고
13년 5월 16일 목요일
49. 나의 경험에서 우려내는 Tip!
성능 개선 작업 편의성 브라우저 호환
다양한 툴을 이용하자!
http://cubic-bezier.com/
http://leaverou.github.io/animatable/
http://leaverou.github.io/prefixfree/
http://prefixmycss.com/
http://lab.hakim.se/scroll-effects/
http://daneden.me/animate/
http://easings.net/
13년 5월 16일 목요일
50. 나의 경험에서 우려내는 Tip!
Javascirpt Animation 으로대체
성능 개선 작업 편의성 브라우저 호환
Animation 속성을 지원하지 않을 때
Animation 속성별로 성능 차이가 날 때
Animation 대신 일반 CSS 적용
Animation 차별화
13년 5월 16일 목요일
52. 정리
CSS Animation
transition, animation 속성으로 만든 animation
CSS 속성
translate, keyframes, animation, transform, opacity ...
만드는 방법
OnlyCSS - 가상 선택자 활용, 요소 렌더링 후 바로 적용
Javascript 활용 - CSS Class 변경, inline 스타일 변경
Tip!
성능 고려!
작업 능률!
브라우저 호환!
13년 5월 16일 목요일
53. - Q&A -
감사합니다 !!
김양귀
email : yanggui@w3labs.kr
tweeter : @kingearlast
13년 5월 16일 목요일
