Làm cho ứng dụng bạn cuốn hút hơn với một vài dòng css3 animation

Mình thích những nét chấm phá nhỏ làm cho một trang web, ứng dụng không chỉ là một tài liệu buồn chán. Điều gì sẽ xảy ra nếu nội dung web không chỉ “xuất hiện” khi một trang được tải, mà thay vào đó xuất hiện, trượt, mờ hoặc xoay vào vị trí? Có thể hơi quá khi nói rằng các chuyển động như thế này luôn hữu ích, mặc dù trong một số trường hợp, chúng có thể thu hút sự chú ý đến các yếu tố nhất định, củng cố các yếu tố nào khác biệt với nhau hoặc thậm chí chỉ ra một trạng thái đã thay đổi. Vì vậy, chúng cũng không hoàn toàn vô dụng nhé!

Vì vậy, mình đã tập hợp một tập hợp các tiện ích CSS để tạo hoạt ảnh cho các phần tử khi chúng đi vào chế độ xem. Và, vâng, CSS thuần túy này. Nó không chỉ có nhiều hình ảnh động và biến thể đẹp mắt, mà còn hỗ trợ làm nổi bật những hình ảnh động đó, gần giống như một cách tạo cảnh.

Hãy xem ví dụ này nhé:

Chuyển động animation bạn sẽ thấy trên IOS khá mượt và mê

Đó thực sự chỉ là một phiên bản huyền ảo hơn của cái này:

Trước tiên, chúng ta sẽ xem xét nền tảng mà tôi đã sử dụng để tạo các hoạt ảnh, sau đó đi sâu vào những điểm khởi sắc nhỏ mà tôi đã thêm vào, cách làm xáo trộn các hoạt ảnh, sau đó làm thế nào để áp dụng chúng vào các phần tử HTML trước khi chúng ta cũng xem cách thực hiện tất cả những điều này đồng thời tôn trọng sở thích chuyển động giảm bớt của người dùng.

Cơ bản

Thêm hoạt cảnh với CSS @keyframes đơn giản được áp dụng cho bất kỳ thứ gì chúng tôi muốn tạo hoạt ảnh khi tải trang. Hãy làm cho nó để một phần tử mờ dần, đi từ độ mờ: 0 đến độ mờ: 1 trong nửa giây:

.animate {
  animation-duration: 0.5s;
  animation-name: animate-fade;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

Cũng lưu ý rằng ở đó có độ trễ animation-delay hoạt ảnh là nửa giây, cho phép phần còn lại của trang web tải trước một chút thời gian. Chế độ hoạt ảnh lấp đầy animation-fill-mode: backwards: ngược lại ở đó để đảm bảo rằng trạng thái hoạt ảnh ban đầu của chúng ta đang hoạt động khi tải trang. Nếu không có điều này, phần tử hoạt hình của chúng tôi sẽ xuất hiện trước khi chúng tôi muốn.

Nếu chúng ta lười biếng, chúng ta có thể gọi nó là một ngày và chỉ cần làm với điều này.

Hình ảnh động lạ mắt (Fancier animations)

Sẽ thú vị hơn nhiều khi có nhiều hoạt ảnh khác nhau để làm việc với chỉ một hoặc hai. Chúng tôi thậm chí không cần tạo một loạt các @keyframe mới để tạo nhiều hoạt ảnh hơn. Nó đủ đơn giản để tạo các lớp mới trong đó tất cả những gì chúng tôi thay đổi là khung hình mà hoạt ảnh sử dụng trong khi giữ nguyên thời gian.

Có gần như vô hạn các hoạt ảnh CSS ngoài đó. (Xem animate.style để biết một bộ sưu tập khổng lồ.) Các bộ lọc CSS (filters), như blur(), brightness()saturate() và tất nhiên các biến đổi CSS cũng có thể được sử dụng để tạo ra nhiều biến thể hơn nữa.

Nhưng bây giờ, hãy bắt đầu với một lớp hoạt ảnh mới sử dụng biến đổi CSS để làm cho một phần tử “pop” vào đúng vị trí.

.animate.pop {
  animation-duration: 0.5s;
  animation-name: animate-pop;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
}

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

I threw in a little cubic-bezier() timing curve, courtesy of Lea Verou’s indispensable cubic-bezier.com for a springy bounce.

Thêm sự chậm trễ

Chúng ta có thể làm tốt hơn! Ví dụ: chúng ta có thể tạo hoạt ảnh cho các phần tử để chúng nhập vào các thời điểm khác nhau. Điều này tạo ra một sự cố định tạo ra chuyển động phức tạp mà không cần một lượng mã phức tạp.

Hoạt ảnh này trên 3 ô vuông bằng cách sử dụng bộ lọc CSS (Filter), chuyển đổi CSS (transform) và số giây chênh lệch 0.1s cách nhau cho mỗi ô vuông

Tất cả những gì làm là tạo một lớp mới (class) cho mỗi phần tử, khoảng trống khi các phần tử bắt đầu hoạt ảnh, sử dụng các giá trị độ trễ animation-delay hoạt ảnh chỉ cách nhau một phần mười giây. Ví dụ ở dưới là : độ trễ cho mỗi lớp 0.6s, 0.7s, 0.8s

.delay-1 { animation-delay: 0.6s; }  
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 0.8s; }

Mọi thứ khác hoàn toàn giống nhau. Và hãy nhớ rằng độ trễ cơ sở của chúng ta là 0,5 giây, vì vậy các lớp trợ giúp này được tính từ đó.

Các tùy chọn trợ năng

Hãy trở thành những công dân web tốt và xóa hoạt ảnh của chúng tôi đối với những người dùng đã bật cài đặt tùy chọn chuyển động giảm của họ

@media screen and (prefers-reduced-motion: reduce) {
  .animate { animation: none !important; }
}

Bằng cách này, hoạt ảnh không bao giờ tải và các phần tử được xem như bình thường. Tuy nhiên, đây là điều đáng được nhắc nhở rằng chuyển động “giảm” không phải lúc nào cũng có nghĩa là “loại bỏ” chuyển động.

Sử dụng hoạt ảnh cho các phần tử HTML

Cho đến nay, chúng tôi đã xem xét một hoạt ảnh cơ bản cũng như một hoạt ảnh hơi lạ mà chúng tôi có thể tạo ra những hoạt ảnh lạ hơn nữa với độ trễ hoạt ảnh đáng kinh ngạc có trong các lớp mới. Chúng tôi cũng đã thấy cách chúng tôi có thể đồng thời tôn trọng sở thích chuyển động của người dùng.

Mặc dù có các bản trình diễn trực tiếp giới thiệu các khái niệm, nhưng chúng tôi vẫn chưa thực sự hướng dẫn cách áp dụng công việc của mình vào HTML. Và điều thú vị là chúng ta có thể sử dụng điều này trên bất kỳ phần tử nào, cho dù là div, span, article, header, section, table, form… mà bạn có được ý tưởng.

Đây là những gì chúng tôi sẽ làm. Chúng tôi muốn sử dụng hệ thống hoạt ảnh của mình trên ba phần tử HTML trong đó mỗi phần tử có ba lớp. Chúng ta có thể mã hóa tất cả mã hoạt ảnh cho chính phần tử đó, nhưng việc chia nhỏ nó ra sẽ cho chúng ta một hệ thống hoạt ảnh nhỏ mà chúng ta có thể sử dụng lại.

  • .animate: Đây là lớp cơ sở chứa khai báo và định thời hoạt ảnh cốt lõi của chúng ta.
  • The animation type: Mình sẽ sử dụng hoạt ảnh “pop” từ trước, nhưng cũng có thể sử dụng hoạt ảnh mờ dần. Lớp này là tùy chọn về mặt kỹ thuật nhưng là một cách tốt để áp dụng các chuyển động riêng biệt.
  • .delay-<number>: Như chúng ta đã thấy trước đó, chúng ta có thể tạo các lớp riêng biệt được sử dụng để di chuyển khi hoạt ảnh bắt đầu trên mỗi phần tử, tạo hiệu ứng gọn gàng. Lớp này cũng là tùy chọn.

Vì vậy, các yếu tố hoạt hình của chúng ta bây giờ có thể trông giống như:

<h2 class="animate pop">One!</h2>
<h2 class="animate pop delay-1">Two!</h2>
<h2 class="animate pop delay-2">Three!</h2>

Hãy đếm chúng!

Kết luận

Kiểm tra lại: Bắt đầu với một bộ @keyframe dường như cơ bản và biến nó thành một hệ thống chính thức để áp dụng các hoạt ảnh thú vị cho các phần tử đi vào chế độ xem.

Đối với mình, đây là tất cả các thành phần tạo nên một hệ thống linh hoạt, dễ sử dụng. Nó cung cấp cho chúng ta rất nhiều với một ít css

Những gì mình đề cập thực sự có thể là một thư viện hoạt hình đầy đủ. Nhưng, tất nhiên, mình không dừng lại ở đó. Toàn bộ tệp CSS ví dụ của bài này về hình ảnh động. Có nhiều loại hoạt ảnh hơn trong đó, bao gồm 15 loại độ trễ khác nhau có thể được sử dụng cho những thứ đáng kinh ngạc. Mình đã và đang sử dụng những thứ này cho các dự án của riêng mình. Hãy thưởng thức và cho mình biết những gì bạn nghĩ trong các ý kiến!

/* ==========================================================================
Animation System
========================================================================== */
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Pop In */
.animate.pop { animation-name: animate-pop; }

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}

@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}

/* Grow In */
.animate.grow { animation-name: animate-grow; }

@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Splat In */
.animate.splat { animation-name: animate-splat; }

@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
    }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}

/* Roll In */
.animate.roll { animation-name: animate-roll; }

@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}

/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}

/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, .9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}

/* Slide In */
.animate.slide { animation-name: animate-slide; }

@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Drop In */
.animate.drop { 
  animation-name: animate-drop; 
  animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
}

@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0,-300px) scale(0.9, 1.1);
}
95% {
  opacity: 1;
  transform: translate(0, 0) scale(0.9, 1.1);
}
96% {
  opacity: 1;
  transform: translate(10px, 0) scale(1.2, 0.9);
}
97% {
  opacity: 1;
  transform: translate(-10px, 0) scale(1.2, 0.9);
}
98% {
  opacity: 1;
  transform: translate(5px, 0) scale(1.1, 0.9);
}
99% {
  opacity: 1;
  transform: translate(-5px, 0) scale(1.1, 0.9);
}
100% {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1);
  }
}

/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}

DigitalOcean hợp tác với Wuuget.com! Ưu đãi chào mừng đặc biệt cho đăng ký và sử dụng Cloud VPS: nhận 100 đô la tín dụng miễn phí.

Đã đăng trong Code Snippets, CSS, Khác và được gắn thẻ .