WEB Animation 2탄입니다. Javascript animation에 이어서 CSS animation에 대해 공부 해봤습니다. 아무래도 실제로 써보면서 익숙해지는게 좋겠죠?

1. WEB

2. Animation

3. 2탄
[WEB

4. UI

5. Study]
NHN NEXT 우재우

6. 지난 시간에 우리는 JS Animation을 공부했어요
requestAnimationFrame 기억나니?!
안 나니? 나니?!?!

7. 오늘은 CSS Animation에 대해 알아봅시다

8. 다들 CSS 은근 무시하고 있었죠?

9. CSS Animation 성능을 무시하지 말라!
나 GPU 쓰는 녀석임

10. Hardware(GPU) Accelerated CSS

11. HTML5에

12. 들어오면서

13. 특정

14. 스펙이

15. 대해

16. 일반

17. 연산은

18. CPU로,

19. graphics

20. processing은

21.
GPU로

22. 처리하게

23. 했습니다.

24. 마치

25. 좌뇌로

26. 수학을

27. 풀고,

28. 우뇌로

29. 그림을

30. 그리는

31. 느낌?!

33. 아래는

34. GPU가

35. 적용되는

36. HTML5

37. 스펙입니다.
• General

38. layout

39. compositing

40.
• CSS3

41. transitions

42.
• CSS3

43. 3D

44. transforms

45.
• Canvas

46. Drawing

47.
• WebGL

48. 3D

49. Drawing
참고:

50. http://www.html5rocks.com/en/tutorials/speed/html5/

51. 뭐 이정도만 보여줘도 충분하겠죠?
http://www.creativebloq.com/css3/animation-with-css3-712437

52. 찬반이 있긴하지만
꽤나 강력해서 많이 씁니다
CSS Animation!!!

53. CSS Animation의 키워드!
@keyframes

54. 일단 따라해봅시다

55. 인터넷에

56. 가장

57. 많이

58. 돌아다니는

59. 예제입니다.

60. h1

61. 엘리먼트를

62. 오른쪽에서

63. 왼쪽으로

64.
옮기는

65. 애니메이션입니다.

66. h1

67. tag를

68. 만들고,

69. CSS

70. 파일에

71. 넣어봅시다.
h1

72. {

76. animation-duration:

77. 3s;

81. animation-name:

82. slidein;

83.
}

84.
@keyframes

85. slidein

86. {

90. from

91. {

98. margin-left:

99. 100%;

106. width:

107. 300%

111. }

115. to

116. {

123. margin-left:

124. 0%;

131. width:

132. 100%;

136. }

137.
}

138. animation-name은 내 맘대로!

139. 다른

140. 속성들은

141. 나중에

142. 보더라도

143. 이건

144. 보고

145. 갑시다.

146. animation-name

147. 속성은

148. 맘대로

149.
설정할

150. 수

151. 있어요~

152. 그리고

153. name

154. 별로

155. animation

156. 설정해주면

157. 되겠죠?
h1

158. {

162. animation-duration:

163. 3s;

167. animation-name:

168. smith_babo;

169.
}

170.
@keyframes

171. smith_babo

172. {

176. from

177. {

184. margin-left:

185. 100%;

192. width:

193. 300%

197. }

201. to

202. {

209. margin-left:

210. 0%;

217. width:

218. 100%;

222. }

223.
}

224. 이렇게도 됩니다!

225. from/to

226. 대신에

227. 0%/100%로

228. 바꿔

229. 쓸

230. 수

231. 있어요!
h1

232. {

236. animation-duration:

237. 3s;

241. animation-name:

242. slidein;

243.
}

244.
@keyframes

245. slidein

246. {

250. 0%

251. {

258. margin-left:

259. 100%;

266. width:

267. 300%

271. }

275. 100%

276. {

283. margin-left:

284. 0%;

291. width:

292. 100%;

296. }

297.
}

298. 그렇다면...

299. 심지어

300. 중간과정을

301. 설정해줄

302. 수도

303. 있다는

304. 어마무시한

305. 사실!!!

306.
아래

307. 코드에

308. 50%

309. 상황을

310. 하나

311. 설정해봅시다.
h1

312. {

316. animation-duration:

317. 3s;

321. animation-name:

322. slidein;

323.
}

324.
@keyframes

325. slidein

326. {

330. 0%

331. {

338. margin-left:

339. 100%;

346. width:

347. 300%

351. }

355. 50%

356. {

363. font-size:

364. 100px;

368. }

372. 100%

373. {

380. margin-left:

381. 0%;

388. width:

389. 100%;

393. }

394.
}

395. 뭐라고?!?! 이것도 된다고?!

396. 마우스

397. 오버되면

398. :hover

399. 썼던거

400. 기억나나요?

401. 여기에도

402. animation

403. 먹일

404. 수

405. 있어요~
div:hover

406. {

409. animation-duration:

410. 3s;

413. animation-name:

414. smith;

415.
}

416.
@keyframes

417. smith

418. {

421. 0%

422. {

427. opacity:

428. 1;

431. }

434. 100%

435. {

440. opacity:

441. 0;

444. }

445.
}

446. 더 하기 전에 하나만 더! transform

447. CSS에는

448. transform

449. 속성이

450. 있습니다.

451. 그리고

452. transform은

453. 엘리먼트의

454. 좌표정보를

455.
바꿀

456. 때

457. 쓸

458. 수

459. 있죠.

460. 예를

461. 들면

462. 엘리먼트를

463. 돌리고,

464. 옮기고,

465. 키우고,

466. 줄이고,

467. 기울
이는

468. 등등에

469. 적용할

470. 수

471. 있습니다.

472. 그러면

473. 우리가

474. 원하는

475. 빙글빙글

476. 효과나,

477. 왔다갔다

478.
효과를

479. 만들

480. 수

481. 있겠죠??

482. 자세한건

483. 각자

484. 더

485. 공부해보시길

486. ㅎㅎㅎ

488. 쓰는

489. 법은

490. 다음과

491. 같습니다.

492. 적당한

493. div하나

494. 만들어서

495. 적용해봅시다.
div

496. {

497.
transform:

498. translate(100px,

499. 200px)

500. rotate(120deg);

501.
}

502. 그러면

503. 마우스를

504. 올렸을

505. 때

506. 상자가

507. 한바퀴

508. 빙글

509. 도는

510. 애니메이션을

511. 만들어볼까요?

512. 아까 안 본 animation- 속성들을 살펴봅시다

513. animation 속성들
animation-name

514.
animation의

515. 이름

516.
animation-delay

518.
이벤트

519. 발생

520. 후

521. 몇

522. 초

523. 후에

524. 재생할지

525. 지정

526.
animation-duration

528.
애니메이션을

529. 몇

530. 초

531. 동안

532. 재생할지

533. 지정

534.
animation-fill-mode

536.
애니메이션이

537. 끝나고

538. 시작되는

539. 상태를

540. 결정

541.
animation-timing-function

543.
중간

544. 상태들의

545. 전환을

546. 어떤

547. 시간간격으로

548. 진행할지

549. 지정
animation-iteration-count

551.
애니메이션

552. 반복

553. 횟수

554. 지정

555.
animation-direction

557.
애니메이션

558. 진행

559. 방향을

560. 설정

561.
animation-play-state

562.
애니메이션을

563. 멈추거나

564. 다시

565. 시작

566. 애니메이션 무한반복
animation-iteration-count: infinite

567. 애니메이션 거꾸로 재생
animation-direction: reverse

568. 애니메이션 그냥 재생 + 다음엔 거꾸로 재생
animation-direction: alternate

569. ease효과를 없애고 싶을 때
animation-timing-function: linear

570. 다 다루고 싶지만 너무 귀찮네요 ㅋㅋㅋ
아래 링크에서 각자 공부하는 걸로!!! ㅋ
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_animations

571. 그래서 CSS Animation과 JS Animation 중에
무엇을 쓸 것인가?

572. 엄마가 좋아? 아빠가 좋아?
그때 그때 달라요^^

573. CSS Animation과 JS Animation은 언제??
1.

574. 아주

575. 단순하고

576. 간단한

577. 애니메이션은

578. CSS로

579. 처리한다!
2.

580. 아주

581. 세밀한

582. 애니메이션이나

586. 동적으로

587. 처리할

588. 로직이

589. 필요하다면

590. JS로

591. 처리한다!

592. 확실히

593. CSS로

594. 코딩하면

595. JS보다

596. 코드량이나

597. 구현

598. 난이도에서

599. 확연한

600. 차이를

601. 보입니
다.

602. 쉬운

603. 길이

604. 있다면

605. 쉽게쉽게

606. ㅎㅎㅎ

607. 그리고

608. CSS

609. Animation은

610. JS

611. Thread와는

612. 별개
로

613. 작동하기

614. 때문에

615. 성능면에서도

616. 효율적일

617. 수

618. 있습니다.

619. 그래서

620. 메뉴

621. 옆에

622. 간단한

623.
이미지

624. 애니메이션들은

625. CSS로

626. 가볍게

627. 처리해줍시다.

628. CSS는

629. 애니메이션이

630. 진행되는

631. 도중에는

632. 상태를

633. 저장하거나

634. 특정

635. 값으로의

636. 변경이

637.
어렵습니다.

638. 원하는

639. 정도의

640. 감속,

641. 가속

642. 등의

643. 물리처리도

644. JS로

645. 구현하는

646. 것이

647. 훨씬

648.
정확합니다.

649. 중간에

650. 값이

651. 동적으로

652. 변한다면

653. 역시

654. JS로

655. 만들어줘야겠죠?

656. 지금부터 실습할 내용은 Javascript로
CSS Animation을 제어하는 방법입니다.
전에도 우리 같이 본 적 있죠?
이제 직접 코딩해봐요~

657. 오늘의 실습자료
네

658. 개의

659. 박스가

660. 있고,

661. 박스를

662. 클릭하면

663.
박스

664. 색깔이

665. 바뀌면서

666.
안에

667. 있는

668. 문자가

669. 빙글빙글

670. 돌아갑니다.

671.
다시

672. 한

673. 번

674. 클릭하면

675. 애니메이션

676. 해제!
힌트1)

677. 당연히

678. addEventListener를

679. 써야겠죠?

680.
힌트2)

681. JS로

682. 클릭된

683. 상태를

684. 관리하기위해서는

692. element.classList.add(‘animate’);

700. element.classList.remove(‘animate’);

701.
힌트3)

702. 추가된

703. animate

704. class에

705. 대해서

713. CSS

714. Animation이

715. 설정되어

716. 있으면

717. 끝!