CSS3 Animation: Bắt đầu tạo hiệu ứng không cần tới javascript

Như các bạn đã biết, khi CSS3 chưa ra đời,thì việc tạo hiệu ứng cho trang web chủ yếu là dùng jQuery. Việc dùng jQuery phần nào làm ảnh hưởng tới tốc độ load của trang web. Nhưng từ khi có CSS3 với 2 thuộc tính quan trọng đó là Transition và Animation có thể giúp ta làm các hiệu ứng mà ko cần tới jquery (tất nhiên với các hiệu ứng phức tạp thì ko thể ko dùng). Vì vậy trong bài viết này mình sẽ giới thiệu với các bạn thuộc tính Animation và một ứng dụng đơn giản của nó. Các bạn xem qua demo. Nếu các bạn đã biết về CSS3 Animation thì thử nghĩ xem demo này animation sẽ được sử dụng thế nào nhé. Còn các bạn bắt đầu tìm hiểu thì chúng ta hãy qua phần lí thuyết trước.

Ứng dụng của animation

Với CSS3 Animation chúng ta có thể tạo ra hình ảnh động, thay thế các hình ảnh hoạt hình, hình ảnh động flash và JavaScript trong các trang web.

Cấu trúc của CSS3 Animation

1	animation: name duration timing-function delay iteration-count direction play-state;

animation-name: Tên của animation.

animation-duration: Thời gian của animation

animation-timing-function: Mô tả animation sẽ diễn ra như thế nào trên chu kì của nó. Giá trị mặc định ease.

animation-delay: Sau bao lâu animation sẽ bắt đầu(độ trễ). mặc định 0s

animation-iteration-count: Số lần thực hiện animation

animation-direction: Chỉ định xem animation sẽ diễn ra lần lượt từng chu kì hay ở chu kì tiếp theo sẽ đảo ngược lại với 2 giá trị: normal và alternate. Giá trị này chỉ có tác dụng khi animation-iteration-count có giá trị từ 2 trở lên.

animation-play-state: Chỉ định animation có diễn ra hay ko (running hoặc paused)

Các bạn chú ý rằng Animation chỉ hỗ trợ bộ -moz và -webkit vì thế chỉ chạy được trên Firefox, Chrome và Safari. Và các bạn cần thêm tiền tố vào trước animation ứng với mỗi trình duyệt.

Ở trên chúng ta đã nói tới animation-name. Tên của animation này được định nghĩa bởi @keyframe. @keyframe này sẽ định nghĩa animation sẽ diễn ra như thế nào.

Cấu trúc @keyframe

1	@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes:từ khóa.

Animationname: bắt buộc phải có. tên của animation và có tác dụng khi gọi animation.

keyframes-selector: bắt buộc. Và được xác định bởi phần trăm thời gian diễn ra animation

css-style: Cần có 1 hay nhiều thuộc tính css.

Đó là những thuộc tính của animation. Tiếp theo chúng ta sẽ xem sử dụng chúng như thế nào vào demo. Trong demo này chúng ta thấy khi hover qua sẽ có sự chuyển động của colum từ trái qua phải và trở về vị trí cũ. Vậy chúng ta sẽ áp dụng css animation ra sao đây? Chúng ta cùng làm nào:

Mã html

01	<div id="content">

02	<div id="colum1" class="colum">

03	<h2>Step 1</h2>

04	<p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>

05	<a href="#">More</a>

06

</div>

07

08	<div id="colum2" class="colum">

09	<h2>Step 2</h2>

10	<p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>

11	<a href="#">More</a>

12

</div>

13

14	<div id="colum3" class="colum">

15	<h2>Step 3</h2>

16	<p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>

17	<a href="#">More</a>

18

</div>

19

20	<div id="colum4" class="colum">

21	<h2>Step 4</h2>

22	<p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>

23	<a href="#">More</a>

24

</div>

25

</div>

Mã CSS cho phần hiển thị:

01

.colum{

02	float: left;

03	width: 281px;

04	height: 279px;

05	background: url(../images/bg-block.png) no-repeat 0 bottom;

06	margin-left: -52px;

07	position: relative;

08

left: 0;

09

}

10	#colum2:hover, #colum3:hover, #colum4:hover {

11	z-index: 5 !important;

12

}

13

14

#colum1{

15	z-index: 4;

16	background: url(../images/bg-step.png) no-repeat 0 0;

17

}

18	#colum1:hover{

19	background: url(../images/bg-step.png) no-repeat 0 bottom;

20

}

21

#colum2{

22	z-index: 3;

23	background: url(../images/bg-step2.png) no-repeat 0 0;

24

}

25	#colum2:hover{

26	background: url(../images/bg-step2.png) no-repeat 0 bottom;

27

}

28

#colum3{

29	z-index: 2;

30	background: url(../images/bg-step3.png) no-repeat 0 0;

31

}

32	#colum3:hover{

33	background: url(../images/bg-step3.png) no-repeat 0 bottom;

34

}

35

#colum4{

36	z-index: 1;

37	background: url(../images/bg-step4.png) no-repeat 0 0;

38

}

39	#colum4:hover{

40	background: url(../images/bg-step4.png) no-repeat 0 bottom;

41

}

42	.colum h2{

43	color: #47453E;

44	font-size: 24px;

45	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

46	font-weight: bold;

47	font-style: normal;

48	text-shadow: 1px 1px 0 rgba(255, 255, 255, .5), 1px 1px 0 rgba(0, 0, 0, .5)inset;

49	background: url(../images/bg-h.png) bottom repeat-x;

50	margin: 10px 47px 0px 21px;

51	padding: 17px 0px 19px;

52	letter-spacing: -1px;

53	text-shadow: 1px 1px 0 rgba(255, 255, 255, .3);

54

}

55	.colum:hover h2{

56	color: #FFFCE9;

57

}

58

.colum p{

59	font-size: 14px;

60	color: #3C3A35;

61	font-weight: bold;

62	font-style: italic;

63	line-height: 24px;

64	letter-spacing: -1px;

65	padding: 8px 82px 0px 19px;

66	margin-bottom: 14px;

67	text-shadow: 1px 1px 0 rgba(255, 255, 255, .2);

68

}

69	.colum:hover p{

70	color: #D9D6C6;

71

}

72

.colum a{

73	background: #47433E;

74	display: inline-block;

75	box-shadow: 1px 1px 0 rgba(255,255,255, .3), 1px 1px 3px rgba(0,0,0, .5) inset;

76	border-radius: 20px;

77	width: 70px;

78	padding: 6px 0 10px;

79	text-align: center;

80	color: #F5F2DF;

81	font-size: 17px;

82	text-shadow: 1px 1px 0 rgba(0, 0, 0, .7);

83	text-decoration: none;

84	margin: 0px 0px 0px 20px;

85

}

86	.colum a:hover{

87	background: #1A1A17;

88

}

Bắt đầu hiệu ứng Animation

Trước hết chúng ta cần định nghĩa animation này đã. Như đã thấy ở demo. Colum sẽ chuyển dịch từ vị trí ban đầu sang phải 60px rồi lại trở về vị trí cũ. Vậy đã sẽ định nghĩa animation này như sau.

Ban đầu(0%): colum tại vị trí 1.

Một phần tư thời gian(25%): Colum di chuyển từ vị trí 1 sang phải tới vị trí 2 cách vị trí 1 30px

Nửa thời gian(50%): Colum di chuyển từ vị trí 2 sang phải tới vị trí 3 cách vị trí 1 60px

Ba phần tư thời gian(75%):Colum di chuyển từ vị trí 3 sang trái về vị trí 2 cách vị trí 1 30px.

Cuối cùng(100%): Colum di chuyển từ vị trí 2 về vị trí 1

Và đây là @keyframes

01	@-webkit-keyframes myfirst /* Safari and Chrome */

02

{

03	0%   {-webkit-transform: translate(0px, 0px); }

04	25%  {-webkit-transform: translate(30px, 0px);}

05	50%  {-webkit-transform: translate(60px, 0px); }

06	75%  {-webkit-transform: translate(30px, 0px); }

07	100% {-webkit-transform: translate(0px, 0px); }

08

}

09	@-moz-keyframes myfirst /* Firefox */

10

{

11	0%   {-moz-transform: translate(0px, 0px); }

12	25%  {-moz-transform: translate(30px, 0px);}

13	50%  {-moz-transform: translate(60px, 0px); }

14	75%  {-moz-transform: translate(30px, 0px); }

15	100% {-moz-transform: translate(0px, 0px); }

16

}

Cuối cùng ta chỉ cần gọi hàm Animation

1	#colum2:hover, #colum3:hover, #colum4:hover {

2	-webkit-animation: myfirst 0.8s linear 0s 1 alternate;

3	-moz-animation: myfirst 0.8s linear 0s 1 alternate;

4

}

Như vậy chúng ta đã có một hiệu ứng cho trang web sử dụng CSS3 Animation. Nếu như các bạn tìm được hiệu ứng trên trang web nào đẹp hãy chia sẽ cùng mọi người. Hoặc tốt hơn hết hãy viết một tut gửi về ntuts.com mọi người chắc hẳn sẽ rất biết ơn về sự chia sẻ của các bạn! Cám ơn mọi người!