Làm chiếc ô tô chuyển động với CSS3 animation

    Các chuyển động trên website ngày trước gần như chỉ dùng javascript mới có thể thực hiện được thì bây giờ với CSS3 bạn có thể hoàn toàn làm rất nhiều thứ chuyển động (còn gọi là animation) trên website của mình mà không đụng tới một tí javascript nào.

    Sau đây mình sẽ demo code một cái ô tô đang chuyển động bằng CSS3

1. Chuẩn bị

    Cần chuẩn bị một cái ảnh vỏ chiếc xe (xe hơi, xe tải, xe khách...) tùy bạn thích nhé, và một ảnh cái bánh xe

image image

2. Tiến hành code

Thư mục

  • css
    • style.css
  • image
    • car.png
    • wheel.png
  • scss
    • style.scss
  • index.html

Code html:

<body>
    <div class="car-contaner">
        <img class="car-body" src="images/car.png">
        <img class="wheel wheel1" src="images/wheel.png">
        <img class="wheel wheel2" src="images/wheel.png">
    </div>
</body>

Code scss: mình dùng sass để viết css, bạn có thể tham khảo cách viết ở đây dùng sass để viết css

/*
 * mixin tranform cho nhiều trình duyệt 
 */
@mixin transform($trans) {
    transform: $trans;
    -webkit-transform: $trans;
    -moz-transform: $trans;
    -ms-transform: $trans;
}
/* 
 * mixin animation infinite chạy không giới hạn
 * $animation: tên keyframe,
 * $second: thời gian (s)
 * $type: loại animation: ease-in-out, linear, ...
 */
@mixin animation ($animation, $second, $type) {
    animation: $animation $second infinite $type;
    -webkit-animation: $animation $second infinite $type;
    -moz-animation: $animation $second infinite $type;
    -ms-animation: $animation $second infinite $type;
}
body {
    text-align: center;
}
.car-contaner {
    display: inline-block;
    position: relative;
    .car-body {
        width: 340px;
        @include animation(car, 0.5s, ease-in-out forwards alternate);
    }
    .wheel {
        position: absolute;
        bottom: 104px;
        width: 62px;
        @include animation(wheel, 0.5s, linear);
    }
    .wheel1 {
        left: 64px;
    }
    .wheel2 {
        right: 54px;
    }
}
/* keyframe xoay bánh xe */
@keyframes wheel {
    0% {
        @include transform(rotate(0));
    }
    100% {
        @include transform(rotate(-360deg));
    }
}
/* keyframe tạo hiệu ứng khi xe đang chạy */
@keyframes car {
    0% {
        @include transform(rotate(0) translateY(0));
    }
    100% {
        @include transform(rotate(0.1deg) translateY(2px));
    }
}

 Giải thích: 

  • animation: tạo chuyển động cho một phần tử, là các viết tổng hợp của các thuộc tính
    • animation-name: tên animation, khai báo bằng keyframe
    • animation-duration: thời gian hoàn thành một chuyển động, mặc định là 0s
    • animation-timing-function: xác định cách thức chuyển động, các bạn tự demo cho các thuộc tính: linear, ease-in-out, .... để hình dung thực tế hơn
    • animation-delay: delay sau bao lâu mới bắt đầu chuyển động, mặc định là 0s
    • animation-iteration-count: số lần thực hiện chuyển động, số tự nhiên hoặc infinity sẽ chạy không giới hạn
    • animation-direction: hướng chuyển động, đảo ngược hay bình thường
  • keyframe: được dùng với animation để xác định cách để biểu diễn một chuyển động. Cách dùng:
/* có thể dùng from, to: chỉ có 2 trạng thái đầu và cuối */
@keyframe <ten> {
    from: {<thuoc_tinh>: <gia_tri>}
    to: {<thuoc_tinh>: <gia_tri>}
}
/* muốn có nhiều trạng thái hơn thì dùng theo phần trăm (%) */
@keyframe <ten> {
    0%: {<thuoc_tinh>: <gia_tri>}
    25%: {<thuoc_tinh>: <gia_tri>}
    50%: {<thuoc_tinh>: <gia_tri>}
    75%: {<thuoc_tinh>: <gia_tri>}
    100%: {<thuoc_tinh>: <gia_tri>}
}

Ở phần trên mình dùng animation với animation-iteration-count: infinity để xác định animation này chạy không giới hạn số lần (xoay bánh xe + hiệu ứng chạy xe) .

  • keyframe wheel: ở trạng thái 0% thì sẽ rotate (xoay) 0 độ, đến 100% thì sẽ là -360 độ (dấu - hoặc ko có dấu trừ tùy cho trường hợp xoay hướng nào)
  • keyframe car: ở trạng thái 0% để thăng bằng bình thường, đến 100% thì xoay 0.1 độ (độ dốc xe nghiên trước/sau) và cho nó nảy lên 2px (translateY dịch theo trục đứng)

và đây là thành quả:

 Các bạn có thể chèn thêm hình ảnh đường, cây cối, bầu trời vào nữa nhé. thanks!

 

Bài viết từ pinlaz.com