Ứ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

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

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

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

Đó 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

<div id="content">
    <div id="colum1" class="colum">
      <h2>Step 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>
      <a href="#">More</a>
    </div>
    
    <div id="colum2" class="colum">
      <h2>Step 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>
      <a href="#">More</a>
    </div>
    
    <div id="colum3" class="colum">
      <h2>Step 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>
      <a href="#">More</a>
    </div>
    
    <div id="colum4" class="colum">
      <h2>Step 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>
      <a href="#">More</a>
    </div>
</div>

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

.colum{
  float: left;
  width: 281px;
  height: 279px;
  background: url(../images/bg-block.png) no-repeat 0 bottom;
  margin-left: -52px;
  position: relative;
  left: 0;
}
#colum2:hover, #colum3:hover, #colum4:hover {
  z-index: 5 !important;
}

#colum1{
  z-index: 4;
  background: url(../images/bg-step.png) no-repeat 0 0;
}
#colum1:hover{
  background: url(../images/bg-step.png) no-repeat 0 bottom;
}
#colum2{
  z-index: 3;
  background: url(../images/bg-step2.png) no-repeat 0 0;
}
#colum2:hover{
  background: url(../images/bg-step2.png) no-repeat 0 bottom;
}
#colum3{
  z-index: 2;
  background: url(../images/bg-step3.png) no-repeat 0 0;
}
#colum3:hover{
  background: url(../images/bg-step3.png) no-repeat 0 bottom;
}
#colum4{
  z-index: 1;
  background: url(../images/bg-step4.png) no-repeat 0 0;
}
#colum4:hover{
  background: url(../images/bg-step4.png) no-repeat 0 bottom;
}
.colum h2{
  color: #47453E;
  font-size: 24px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .5), 1px 1px 0 rgba(0, 0, 0, .5) inset;
  background: url(../images/bg-h.png) bottom repeat-x;
  margin: 10px 47px 0px 21px;
  padding: 17px 0px 19px;
  letter-spacing: -1px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .3);
}
.colum:hover h2{
  color: #FFFCE9;
}
.colum p{
  font-size: 14px;
  color: #3C3A35;
  font-weight: bold;
  font-style: italic;
  line-height: 24px;
  letter-spacing: -1px;
  padding: 8px 82px 0px 19px;
  margin-bottom: 14px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .2);
}
.colum:hover p{
  color: #D9D6C6;
}
.colum a{
  background: #47433E;
  display: inline-block;
  box-shadow: 1px 1px 0 rgba(255,255,255, .3), 1px 1px 3px rgba(0,0,0, .5) inset;
  border-radius: 20px;
  width: 70px;
  padding: 6px 0 10px;
  text-align: center;
  color: #F5F2DF;
  font-size: 17px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .7);
  text-decoration: none;
  margin: 0px 0px 0px 20px;
}
.colum a:hover{
  background: #1A1A17;
}

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.

Và đây là @keyframes

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {-webkit-transform: translate(0px, 0px); }
25%  {-webkit-transform: translate(30px, 0px);}
50%  {-webkit-transform: translate(60px, 0px); }
75%  {-webkit-transform: translate(30px, 0px); }
100% {-webkit-transform: translate(0px, 0px); }
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {-moz-transform: translate(0px, 0px); }
25%  {-moz-transform: translate(30px, 0px);}
50%  {-moz-transform: translate(60px, 0px); }
75%  {-moz-transform: translate(30px, 0px); }
100% {-moz-transform: translate(0px, 0px); }
}

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

  #colum2:hover, #colum3:hover, #colum4:hover {
  -webkit-animation: myfirst 0.8s linear 0s 1 alternate;
  -moz-animation: myfirst 0.8s linear 0s 1 alternate;
}

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!