Animation trong CSS

CSS animation là công nghệ được giới thiệu trong phiên bản CSS3. Nó cho phép chúng ta tạo hiệu ứng chuyển động mà không phải sử dụng Javascript hay Flash. Trong bài học này bạn sẽ tìm hiểu cách tạo chuyển động thẳng và quay vòng đồng thời cho một thẻ div nhờ sử dụng HTML5 và CSS3.

CSS Transform

Trước tiên để tạo chuyển động quay vòng, chúng ta cần tạo hiệu ứng quay cho thẻ div sử dụng phương thức transform trong CSS3. Phương thức này được viết với cú pháp như sau:

div {
    transform: rotate(30deg);
}

Ví dụ trên sẽ xoay một thẻ div với góc xoay là 30 độ. Tuy nhiên để phương thức này hoạt động được trên các trình duyệt khác, bạn cần phải thêm vendor prifix vào trước nó để có thể sử dụng được cho mỗi trình duyệt như ở dưới đây:

div {
    transform: rotate(30deg);
    -ms-transform: rotate(7deg); /* IE 9 */
    -moz-transform: rotate(7deg); /* Mozilla Firefox */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
}

See the Pen MaYKQY by Hoc Lap Trinh (@hoclaptrinh) on CodePen.

Keyframe

Ở trên chúng ta mới thực hiện việc quay tĩnh thẻ div. Để tạo một chuyển động animation chúng ta cần phải thêm các keyframe. Mỗi keyframe sẽ được chạy ở một thời điểm xác định và trong keyframe đó nó quy định việc phần tử sẽ di chuyển ra sao. Để dễ hiểu hơn hãy xem một ví dụ cụ thể sau. Một hiệu ứng animation thực hiện việc di chuyển thẻ div về phía phải 100px trong vòng 5 giây với vận tốc cố định (chuyển động đều). Như vậy trong mỗi giây thẻ div này sẽ cần phải được di chuyển về phải 20px. Nếu bạn xác định 5 keyframe trong chuyển động này thì mỗi keyframe sẽ phải thực hiện công việc di chuyển phần tử div về phải 20px.

Tuy nhiên số lượng keyframe là bao nhiêu thì bạn có thể tùy chọn. Nếu bạn chọn 10 keyframes thì khoảng cách phải di chuyển thẻ div về phải trong mỗi keyframe chỉ còn 10px.

@keyframes move_right {
  0% {left: 0px;}
  20% {left: 20px;}
  40% {left: 40px;}
  60% {left: 60px;}
  80% {left: 80px;}
  100% {left: 100px;}
}

Animation

Cuối cùng, để chuyển động diễn ra, chúng cần sử dụng thuộc tính animation kết hợp với keyframes ở trên. Cú pháp như sau:

div {
  animation: move_right 5s infinite;
}

Ở đây, 5 keyframes trong move_right (được định nghĩa ở ví dụ trước đó) sẽ được thực hiện trong vòng 5 giây. Ngoài ra sử dụng infinite để quy định animation này được thực hiện mãi mãi (cho tới khi người dùng đóng tab hoặc trình duyệt).

Chúng ta cần thêm giá trị độ dài, độ rộng, và màu nền cho thẻ div để có thể thấy được chuyển động bằng mắt. Cuối cùng, bạn cũng đừng quên đặt giá trị cho thuộc tính position cho thẻ này.

div {
      background: orange;
      width: 100px;
      height: 100px;
      position: relative;
}

See the Pen rOaxZL by Hoc Lap Trinh (@hoclaptrinh) on CodePen.

Bạn có thể tham khảo đoạn Code đầy đủ ở đây:

@keyframes animated_div
{
    0%      {transform: rotate(0deg);left:0px;}
    25%     {transform: rotate(20deg);left:0px;}
    50%     {transform: rotate(0deg);left:500px;}
    55%     {transform: rotate(0deg);left:500px;}
    70%     {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {transform: rotate(-360deg);left:0px;}
}

#animated_div
{
    display: inline-block;
    margin-top: 100px;
    background:#92B901;
    color:#ffffff;
    position:relative;
    font-weight:bold;
    font-size:20px;
    padding:10px;

    // animation
    animation:animated_div 5s 1;
    -moz-animation:animated_div 5s 1;
    -webkit-animation:animated_div 5s 1;
    -o-animation:animated_div 5s 1;
    border-radius:5px;
    -webkit-border-radius:5px;
}

@keyframes animated_div
{
    0%      {transform: rotate(0deg);left:0px;}
    25%     {transform: rotate(20deg);left:0px;}
    50%     {transform: rotate(0deg);left:500px;}
    55%     {transform: rotate(0deg);left:500px;}
    70%     {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
    0%      {-webkit-transform: rotate(0deg);left:0px;}
    25%     {-webkit-transform: rotate(20deg);left:0px;}
    50%     {-webkit-transform: rotate(0deg);left:500px;}
    55%     {-webkit-transform: rotate(0deg);left:500px;}
    70%     {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
    0%   {-moz-transform: rotate(0deg);left:0px;}
    25%  {-moz-transform: rotate(20deg);left:0px;}
    50%  {-moz-transform: rotate(0deg);left:500px;}
    55%  {-moz-transform: rotate(0deg);left:500px;}
    70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
    0%   {transform: rotate(0deg);left:0px;}
    25%  {transform: rotate(20deg);left:0px;}
    50%  {transform: rotate(0deg);left:500px;}
    55%  {transform: rotate(0deg);left:500px;}
    70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {transform: rotate(-360deg);left:0px;}
}

See the Pen oXOexK by Hoc Lap Trinh (@hoclaptrinh) on CodePen.

Demo: CSS3 Animation

Nguồn: CodeHub.vn