Hoạt ảnh văn bản css từ trái sang phải

Có nhiều cách tiếp cận khác nhau có thể được thực hiện để giải quyết cùng một vấn đề Css Animation Left. Các giải pháp còn lại được thảo luận thêm

  0%   {background-color:red; left:0px; top:0px;}

Chúng tôi đã chỉ ra cách giải quyết vấn đề Css Animation Left bằng cách xem xét một số trường hợp khác nhau

Làm cách nào để bạn thay đổi hướng hoạt ảnh trong CSS?

Thuộc tính animation-direction xác định xem hoạt ảnh sẽ được phát tiến, lùi hay theo chu kỳ luân phiên. Định nghĩa và cách sử dụng

Làm cách nào để di chuyển văn bản từ trái sang phải trong hoạt ảnh CSS?

thay vì trái. 100% nó nên để lại. 100% - ( số ký tự trong chuỗi * dấu cách được lấy bởi một ký tự ) Bây giờ, rõ ràng là bạn sẽ không làm những việc như vậy trong css. Vì vậy, tốt hơn là thay vì sử dụng left hoặc right , hãy sử dụng margin-left hoặc margin-right

Bạn có thể làm động CSS vị trí không?

Bất kỳ thuộc tính CSS nào được chuyển đổi cũng có thể được làm động. Sử dụng độ trễ hoạt ảnh để tạm dừng trước khi thực hiện hoạt ảnh, sử dụng các giá trị thời gian giống như thời lượng. Thuộc tính animation-iteration-count đặt số lần hoạt ảnh phát, dưới dạng số nguyên hoặc vô hạn

Làm cách nào để làm mờ hoạt ảnh trong CSS?

Trong CSS, hãy sử dụng quy tắc @keyframes được ghép nối với fadeIn. Ở mức 0%, đặt độ mờ thành 0. Ở mức 100%, đặt độ mờ thành 1. Điều này tạo ra hiệu ứng mờ dần. 07-Jun-2022

Làm thế nào để bạn đảo ngược hình ảnh động?

CSS hướng hoạt ảnh là gì?

Thuộc tính CSS hướng hoạt ảnh đặt xem hoạt ảnh có nên phát tiến, lùi hay xen kẽ qua lại giữa việc phát trình tự tiến và lùi. 26-Tháng 9-2022

Làm cách nào để hiển thị văn bản từ trái sang phải?

Theo mặc định, căn chỉnh văn bản được đặt theo hướng từ trái sang phải trong Tài liệu HTML. Để hiển thị văn bản từ phải sang trái, chúng ta chỉ cần đặt thuộc tính direction thành giá trị của “rtl”. ví dụ 1. HTML. 16-Jul-2021

Làm cách nào để đặt văn bản ở phía bên trái trong CSS?

Việc căn chỉnh văn bản có thể được thực hiện bằng CSS (Cascading Style Sheets) và thẻ Thuộc tính HTML. Ghi chú. Căn trái của văn bản là mặc định. Căn chỉnh văn bản

Làm cách nào để di chuyển văn bản từ trái sang phải trong HTML CSS?

Thẻ trong HTML được sử dụng để tạo văn bản hoặc hình ảnh cuộn trong trang web. Nó cuộn từ trái sang phải theo chiều ngang hoặc từ phải sang trái hoặc theo chiều dọc từ trên xuống dưới hoặc từ dưới lên trên. 21-Jun-2021

CSS di chuột là gì?

Các. hover CSS pseudo-class phù hợp khi người dùng tương tác với một phần tử bằng thiết bị trỏ, nhưng không nhất thiết phải kích hoạt nó. Nó thường được kích hoạt khi người dùng di chuột qua một phần tử bằng con trỏ (con trỏ chuột). 26-Tháng 9-2022

Cách tạo hiệu ứng văn bản từ phải sang trái bằng CSS

---

Văn bản hoạt hình từ phải sang trái

Quy tắc @keyframes chỉ định mã hoạt ảnh. Hoạt động được tạo bằng cách thay đổi dần từ một tập hợp kiểu CSS này sang tập hợp kiểu CSS khác

Di chuyển trái hoạt hình

 


    TechFunda
    Click here to load
    

Trong đoạn mã trên, chúng tôi đã xác định hoạt ảnh khung hình chính bằng hoạt ảnh khung hình chính, chúng tôi có thời lượng hoạt hình webkit là 1 giây, xác định tốc độ pf hoạt ảnh và đặt tên là slidein và trong dòng tiếp theo, chúng tôi có khung hình chính với tên là slide in để thay đổi

Hoạt hình CSS cho phép bạn xây dựng các chuỗi hoạt hình phức tạp. Giống như các hiệu ứng chuyển tiếp, chúng điều khiển các thuộc tính CSS kiểm soát cách các phần tử giao diện xuất hiện. Không giống như quá trình chuyển đổi, chúng không bị ràng buộc với sự thay đổi giữa các biểu định kiểu phân biệt trạng thái giao diện. Hoạt hình khung hình chính có thể thực thi tự do và cung cấp cách tốt nhất để xây dựng các hiệu ứng phức tạp thành giao diện

Để tận dụng tối đa hướng dẫn này, bạn nên làm quen với các chuyển tiếp CSS. Vì chúng hoạt động tương tự nhau nên thuật ngữ hoạt hình CSS cũng thường đóng vai trò là cách viết tắt để chỉ các chuyển tiếp, nhưng hướng dẫn này chỉ thảo luận về hoạt hình khung hình chính

Những điểm chính này đóng vai trò là tài liệu tham khảo

• Thuộc tính tên hoạt ảnh bắt buộc chỉ định tên của hoạt ảnh khung hình chính và phải tương ứng với quy tắc @keyframes. Tải CSS hoặc áp dụng một tên mới khiến hoạt ảnh thực thi

• Sử dụng thuộc tính thời lượng hoạt ảnh được yêu cầu để đặt tổng thời gian mà hoạt ảnh thực thi, tính bằng giây hoặc mili giây (1 giây == 1000 mili giây)

• Quy tắc @keyframes khai báo chuỗi đầy đủ tương ứng với tên hoạt ảnh. Trong khối, các khung hình chính như 0%, 50% và 100% hoạt động như các bộ chọn thao tác các thuộc tính CSS trong suốt thời lượng của hoạt ảnh

• Bất kỳ thuộc tính CSS nào được chuyển đổi cũng có thể được làm động

• Sử dụng độ trễ hoạt ảnh để tạm dừng trước khi thực hiện hoạt ảnh, sử dụng các giá trị thời gian giống như thời lượng

• Thuộc tính animation-iteration-count đặt số lần hoạt ảnh phát, dưới dạng số nguyên hoặc vô hạn

• Thuộc tính hướng hoạt ảnh cho phép bạn phát hoạt ảnh theo thứ tự bình thường hoặc ngược lại** hoặc luân phiên giữa hai thứ để lặp lại chẵn/lẻ

• Thuộc tính animation-fill-mode duy trì trạng thái bắt đầu của hoạt ảnh trước khi hoạt ảnh bị trì hoãn thực thi (ngược)), trạng thái kết thúc của nó sau lần lặp cuối cùng (chuyển tiếp) hoặc cả hai

• Đặt trạng thái phát hoạt ảnh thành tạm dừng hoặc chạy để dừng và bắt đầu hoạt ảnh

• Thuộc tính chức năng thời gian hoạt hình kiểm soát tốc độ tiến triển giữa mỗi khung hình chính và có thể được thay đổi trong hoạt ảnh. Nó sử dụng cùng một bộ từ khóa như chuyển tiếp. Các hàm dễ dàng, dễ dàng vào, dễ dàng ra, dễ dàng vào ra, tuyến tính hoặc tùy chỉnh cube-bezier()

• Thuộc tính tốc ký hoạt hình có thể đại diện cho các giá trị từ tất cả các thuộc tính hoạt ảnh khác. Nếu bao gồm hai phép đo thời gian, trước tiên chúng được hiểu là thời lượng sau đó là độ trễ

• Sử dụng tên thuộc tính tiêu chuẩn cùng với tiền tố -webkit-. Chỉ định cả quy tắc @keyframes và @-webkit-keyframes. Từ JavaScript, chỉ định các thuộc tính tiêu chuẩn như animationName cùng với WebkitAnimationName

• Sử dụng các giá trị thuộc tính được phân tách bằng dấu phẩy để chỉ định nhiều hoạt ảnh. Hoạt hình chạy đồng thời không thể thao tác bất kỳ thuộc tính nào giống nhau

• Để tự động sửa đổi các quy tắc @keyframes, hãy đưa CSS vào vùng kiểu cục bộ hoặc sử dụng giao diện CSSKeyframeRule

Thuộc tính hoạt hình

Để hiểu hoạt hình hoạt động như thế nào, hãy bắt đầu với một ví dụ về biểu tượng xung, biểu tượng này có thể được sử dụng trong giao diện di động để cho biết phần nào của ứng dụng được chọn. Hoạt hình liên tục thu nhỏ và phát triển một trong các biểu tượng khi nó làm mờ và sáng nó. Ví dụ đơn giản này sẽ minh họa một số tính năng khác bên dưới

(Xem mẫu trực tiếp)

Thuộc tính CSS hoạt ảnh chỉ định tên của hoạt ảnh bạn sẽ cung cấp, xung trong trường hợp này và thời lượng tổng thể của hoạt ảnh là 1 giây. Cả hai đều được yêu cầu

div.selected {
    animation : pulse 1s infinite;
}

Từ khóa vô hạn chỉ ra rằng hoạt ảnh lặp lại vô thời hạn. Nếu không được chỉ định, hoạt ảnh chỉ thực hiện một lần

Thuộc tính hoạt hình là một tốc ký kết hợp các giá trị của người khác

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

Thuộc tính hoạt hình là tiêu chuẩn trong nhiều trình duyệt, nhưng khi viết bài này, yêu cầu tiền tố cho tất cả các trình duyệt WebKit và các phiên bản cũ hơn của Gecko và Opera. Để được hỗ trợ rộng rãi nhất, bạn nên xác định dự phòng các thuộc tính hoạt hình

div.selected {
    -webkit-animation : pulse 1s infinite;
    -moz-animation    : pulse 1s infinite;
    -o-animation      : pulse 1s infinite;
    animation         : pulse 1s infinite;
}

Từ đây trở đi, các ví dụ chỉ nêu bật các tên thuộc tính không có tiền tố

Quy tắc @keyframes

Thuộc tính tên hoạt ảnh chỉ định một hoạt ảnh có tên là xung. Sử dụng quy tắc @keyframes trong CSS để xác định từng chuỗi hoạt hình được đặt tên

@keyframes pulse {
    from {
        transform : scale(1);
        opacity   : 1;
    }
    50% {
        transform : scale(0.75);
        opacity   : 0.25;
    }
    to {
        transform : scale(1);
        opacity   : 1;
    }
}

Toàn bộ trình tự từ và đến thực thi trong khoảng thời gian được xác định bởi thuộc tính thời lượng hoạt ảnh. Mỗi khung hình chính trong chuỗi hoạt động giống như một bộ chọn CSS, thao tác các giá trị của các thuộc tính riêng lẻ. Chuyển đổi từ khung hình chính này sang khung hình chính khác hoạt động giống như chuyển đổi và cùng một bộ thuộc tính có thể được chuyển đổi cũng có thể được thao tác trong khung hình chính. Trong trường hợp này, độ mờ làm mờ biểu tượng và chuyển đổi thu nhỏ biểu tượng. (Xem hướng dẫn về biến đổi để biết chi tiết về hàm scale() của thuộc tính biến đổi. )

Giống như các thuộc tính hoạt ảnh, mỗi quy tắc @keyframes cũng cần được thêm tiền tố để chạy trên các trình duyệt dựa trên WebKit như Chrome và Safari. Các thuộc tính biến đổi bên dưới cũng có tiền tố

@-webkit-keyframes pulse {
   0%   { -webkit-transform: scale(1)   ; opacity: 1;    }
   50%  { -webkit-transform: scale(0.75); opacity: 0.25; }
   100% { -webkit-transform: scale(1)   ; opacity: 1;    }
}

Ví dụ này cũng thay thế 0% và 100% cho các từ khóa đồng nghĩa từ và đến. (Nếu bạn không chỉ định, các giá trị sẽ chuyển đổi từ khung hình chính có sẵn tiếp theo trong chuỗi. )

Thay đổi hướng

Hoạt hình đơn giản này cũng có thể được xen kẽ để tạo ra hiệu ứng tương tự

div.selected {
    animation-name            : pulse;
    animation-duration        : 0.5s;
    animation-iteration-count : infinite;
    animation-direction       : alternate;
}

Thời lượng hoạt ảnh hiện bằng một nửa giá trị trước đó của nó. Đặt hướng hoạt ảnh thành thay thế làm cho hoạt ảnh thực thi theo thứ tự bình thường (từ/đến), sau đó theo thứ tự ngược lại (đến/từ) cho các lần lặp được đánh số chẵn. Điều này cho phép điểm bắt đầu và điểm kết thúc của hoạt ảnh thay đổi

________số 8

(Bạn cũng có thể đặt hướng hoạt hình thành luôn đảo ngược hoặc đảo ngược luân phiên. )

Nhiều hình ảnh động

Các thuộc tính hoạt hình chấp nhận nhiều giá trị được phân định bằng dấu phẩy, cho phép bạn kết hợp các hoạt ảnh khác nhau lại với nhau hoặc chạy chúng đồng thời

Biến thể trên biểu tượng xung này sử dụng hai khung hình chính để thao tác các thuộc tính chuyển đổi và độ mờ một cách riêng biệt. Trong trường hợp này, việc đặt thời lượng khác nhau sẽ khiến hai hiệu ứng mờ dần và thu nhỏ bị lệch pha

div.selected {
    animation: fade 0.5s infinite alternate, shrink 0.53s infinite alternate;
}
/* long form: */
div.selected {
    animation-name            : fade      , shrink    ;
    animation-duration        : 0.5s      , 0.53s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}
@keyframes fade {
    from { opacity   : 1; }
    to   { opacity   : 0.25; }
}
@keyframes shrink {
    from { transform : scale(1); }
    to   { transform : scale(0.75); }
}

(Xem mẫu trực tiếp)

Đảm bảo rằng mọi khung hình chính hoặc chuyển tiếp thực thi đồng thời không thao túng bất kỳ thuộc tính nào giống nhau. Đây không phải là vấn đề đối với hoạt ảnh hoặc chuyển tiếp được áp dụng cho các yếu tố khác nhau

Đặt độ trễ

Cũng như các hiệu ứng chuyển tiếp, hoạt ảnh có thể bị trì hoãn trước khi chúng thực thi. Sử dụng thuộc tính animation-delay để chờ một thời gian trước khi rung biểu tượng

 


    TechFunda
    Click here to load
    

0

(Trong phiên bản này, biểu tượng rung ba lần. )

Bất cứ khi nào hai phép đo thời gian được chỉ định trong một giá trị thuộc tính tốc ký, thì phép đo thứ hai được hiểu là độ trễ

 


    TechFunda
    Click here to load
    

1

Ví dụ phức tạp hơn này hiển thị hoạt ảnh bị trì hoãn trong giao diện di động. Sau khi tạm dừng ban đầu, nội dung sẽ chuyển xuống để nhường chỗ cho một loạt quảng cáo biểu ngữ, sau đó liên tục quay vòng theo chiều ngang và tua lại để hiển thị quảng cáo đầu tiên

(Xem mẫu trực tiếp)

Để đạt được hiệu ứng này, thuộc tính animation-delay làm cho nội dung chuyển xuống sau 4 giây. Đây là CSS có liên quan

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

0

Thuộc tính animation-iteration-count làm cho hoạt ảnh chỉ thực hiện một lần. (Phần tiếp theo giải thích thuộc tính animation-fill-mode. )

Hình ảnh động đầu tiên của biểu ngữ (insertBanner) phản ánh chặt chẽ nội dung (displaceContent) được hiển thị ở trên. Sau 4 giây, nó trượt vào chế độ xem từ bên ngoài màn hình

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

1

Hoạt ảnh thứ hai của biểu ngữ (scrollBanner) tiếp tục ở mốc 5 giây, sau khi hoạt ảnh đầu tiên hoàn thành. Trong vòng 25 giây, nó sẽ dịch chuyển banner sang một bên để xem từng quảng cáo trong gần 5 giây. Sau khi tua lại vị trí ban đầu của nó 97% qua các khung hình chính, việc đặt số lần lặp lại hoạt ảnh thành vô hạn sẽ khiến hoạt ảnh phát lại vô thời hạn

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

2

chế độ điền

Mỗi khung hình chính trong hoạt ảnh chỉ định các thuộc tính CSS, giống như các bộ chọn CSS thông thường. Các thuộc tính được thao tác bởi các khung hình chính có thể khác với các thuộc tính được xác định hoặc kế thừa bởi bộ chọn. Theo mặc định, sau khi hoạt ảnh hoàn thành chuỗi lặp lại của chúng, các thuộc tính này đột ngột chuyển từ giá trị của khung hình chính cuối cùng trở về giá trị ban đầu của chúng. Tương tự như vậy khi hoạt ảnh bị trì hoãn, các thuộc tính sẽ chuyển từ giá trị ban đầu của chúng sang giá trị của khung hình chính đầu tiên

Thuộc tính animation-fill-mode khắc phục sự cố này. Đặt nó thành chuyển tiếp làm cho các giá trị thuộc tính của khung hình chính cuối cùng vẫn tồn tại sau khi hoạt ảnh hoàn tất. Đặt nó thành ngược sẽ làm cho thuộc tính của khung hình chính đầu tiên ghi đè cách thuộc tính sẽ xuất hiện mà không có hoạt ảnh. Đặt nó thành cả hai làm cho các thuộc tính của khung hình chính ghi đè lên các thuộc tính mặc định của phần tử cả trước và sau khi hoạt ảnh thực thi. Đặt nó thành giá trị mặc định là none sẽ giữ tất cả các thuộc tính ở giá trị mặc định của chúng trừ khi hoạt ảnh đang thực thi

Lưu ý rằng không có giá trị nào trong số này tạo ra bất kỳ sự khác biệt nào đối với hoạt ảnh có độ trễ hoạt ảnh được đặt thành 0 và hoạt ảnh có số lần lặp lại là vô hạn. Ngay cả khi đó, chúng chỉ tạo ra sự khác biệt cho các thuộc tính có giá trị được chỉ định ở đầu hoặc cuối hoạt ảnh khác với cách chúng đã được chỉ định bởi chính phần tử đó

Hoạt hình biểu ngữ được hiển thị ở trên đưa ra một ví dụ về cách sử dụng chế độ lấp đầy hoạt ảnh. Theo mặc định, cả biểu ngữ và nội dung chính đều nằm trong cùng một không gian ở đầu màn hình. Hoạt hình displaceContent của nội dung trượt nó ra khỏi vị trí mặc định của nó và chế độ chuyển tiếp lấp đầy của nó giữ nó ở đó sau khi trượt xong. Nếu không, nó sẽ quay lại ngay trên đầu màn hình. Tương tự như vậy, hoạt ảnh insertBanner của biểu ngữ sẽ trượt nó từ một vị trí được chỉ định trong khung hình chính đầu tiên và chế độ điền ngược của nó sẽ giữ nó ở đó trước khi hoạt ảnh bị trì hoãn bắt đầu thực thi và nó trượt xuống vị trí mặc định của nó

Chế độ điền không chỉ có thể ghi đè lên các thuộc tính cơ bản của phần tử mà cả các hoạt ảnh khác. Đối với hoạt ảnh thứ hai của biểu ngữ, chế độ lấp đầy hoạt ảnh được đặt thành không. Nếu nó được đặt thành cả hai hoặc ngược lại, hoạt ảnh đầu tiên sẽ không thực thi. Vì hoạt ảnh được diễn giải theo thứ tự khai báo của chúng và vì cả hai hoạt ảnh đều thao tác với thuộc tính biến đổi, nên việc chỉ định chế độ lấp đầy cho khoảng thời gian trước khi hoạt ảnh thứ hai thực thi sẽ ghi đè lên bất kỳ hoạt ảnh nào của hoạt ảnh đầu tiên thực hiện với thuộc tính biến đổi

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

3

chức năng thời gian

Cùng một tập hợp các chức năng thời gian áp dụng cho chuyển tiếp cũng áp dụng cho hoạt ảnh. (Để biết chi tiết, hãy xem Chức năng thời gian. ) Thuộc tính chức năng thời gian hoạt hình cho phép bạn kiểm soát đường cong phản hồi cho tiến trình của từng khung hình chính. Nó nhận ra các giá trị từ khóa dễ dàng, dễ dàng vào, dễ dàng ra, dễ dàng vào, tuyến tính, cùng với các hàm cube-bezier() cho các đường cong phản hồi tùy chỉnh

Theo mặc định, giá trị dễ dàng bắt đầu chậm từng khung hình chính, tăng tốc độ, sau đó chậm lại ở cuối, đây không phải lúc nào cũng là hành vi phù hợp. Trong ví dụ này, một loạt các mục, bị lệch để có vẻ chuyển động nhanh, trượt ngẫu nhiên từ cạnh phải của màn hình, sau đó va vào tường ở cạnh trái và lắc lư rồi dừng lại

(Xem mẫu trực tiếp)

Đặt chức năng thời gian thành tuyến tính giúp chuyển từ trạng thái đang di chuyển sang trạng thái dừng đột ngột nhất có thể. Điều này xảy ra ở khung hình chính 70%

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

4

Để kiểm soát tốt hơn, bạn thậm chí có thể thao tác giá trị của thuộc tính chức năng thời gian hoạt ảnh trong mỗi khung hình chính để giá trị này thay đổi trong quá trình hoạt ảnh

Hoạt ảnh động

Ví dụ trên sử dụng JavaScript để gán độ trễ ngẫu nhiên để ngắt quãng quá trình thực thi của từng hoạt ảnh. Bất kỳ thuộc tính hoạt hình nào cũng có thể được đặt trực tiếp trên đối tượng kiểu của phần tử, nhưng khi viết bài này, bạn cũng cần thêm các tên thuộc tính có tiền tố Webkit thay thế

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

5

Khi hoạt ảnh bắt đầu thực thi, việc đặt thuộc tính trạng thái phát hoạt ảnh thành tạm dừng sẽ dừng hoạt ảnh đó và giá trị đang chạy sẽ tiếp tục hoạt ảnh đó

Như trong ví dụ sau, bạn thường muốn tạm dừng hoạt ảnh nếu nó trở thành một phần của thành phần giao diện không còn ở trạng thái hoạt động

(Xem mẫu trực tiếp)

Để tự động bắt đầu hoạt ảnh, hãy chỉ định một tên khác. Trong ví dụ này, việc áp dụng một lớp animate sẽ ghi đè giá trị mặc định của thuộc tính tên hoạt hình, là một chuỗi rỗng. Hoạt hình trình tự thực thi mỗi khi lớp được áp dụng sau khi vắng mặt

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

6

Khi lớp animate được áp dụng, chỉ cần áp dụng lại nó sẽ không có tác dụng, bởi vì tên của hoạt ảnh phải thực sự thay đổi giá trị của nó. Điều này cũng đúng khi áp dụng thuộc tính trực tiếp cho phần tử. Nút đầu tiên bên dưới chỉ hoạt động một lần nhưng nút thứ hai có thể được lặp lại vì nút này phản hồi đầu vào bằng chuột hoặc cảm ứng không đồng bộ

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

7

Như một giải pháp thay thế, bạn có thể đưa CSS vào vùng kiểu cục bộ. Diễn giải lại CSS khiến hoạt ảnh thực thi lại

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

8

Việc áp dụng quy tắc @keyframes phức tạp hơn một chút so với việc đặt thuộc tính. Có lẽ cách dễ nhất là đưa CSS vào một vùng kiểu giống như cách được mô tả ở trên

div.selected {
    animation-name            : pulse;
    animation-duration        : 1s;
    animation-iteration-count : infinite;
}

9

Có sẵn API chính thức hơn, đặc biệt là để sửa đổi các quy tắc hiện có. Tóm lại, giả sử đây là phong cách được khai báo đầu tiên của bạn