Cách sử dụng animate.css

CSS transitionsprovide a way khổng lồ control animation tốc độ when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property lớn take place over a period of time. For example, if you change the color of an element from trắng to lớn blaông chồng, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve sầu, all of which can be customized.

Bạn đang xem: Cách sử dụng animate.css

Animations that involve transitioning between two states are often called implicit transitions as the states in between the start & final states are implicitly defined by the browser.


CSS transitions let you decide which properties to lớn animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), & how the transition will run (by defining a timing function, e.g. linearly or quiông xã at the beginning, slow at the end).

Xem thêm: Nơi Bán Tai Nghe Jabra Move Giá Rẻ Nhất Tháng 04/2021, Đánh Giá Tai Nghe Jabra Move Wireless

The Web author can define which property has lớn be animated and in which way. This allows the creation of complex transitions. As it doesn"t make sense lớn animate some properties, the danh mục of animatable properties is limited to a finite set.

The auto value is often a very complex case. The specification recommends not animating from and khổng lồ tự động hóa. Some user agents, like those based on Gecko, implement this requirement & others, like those based on WebKit, are less strict. Using animations with automay lead khổng lồ unpredictable results, depending onthe browser và its version, and should be avoided.

CSS Transitions are controlled using the shorthand transition property. This is the best way to configure transitions, as it makes it easier to avoid out of sync parameters, which can be very frustrating lớn have sầu to lớn spkết thúc lots of time debugging in CSS.

You can control the individual components of the transition with the following sub-properties:

(lưu ý that these transitions loop infinitely only for the purpose of our examples; CSS transitions only visualize a property change from start to finish. If you need visualizations that loop, look into the CSS animation property.)

transition-property Specifies the name or names of the CSSproperties to which transitions should be applied. Only properties listed here are animated during transitions; changes khổng lồ all other properties occur instantaneously as usual. transition-duration Specifies the duration over which transitions should occur. You can specify a single duration that applies lớn all properties during the transition, or multiple values lớn allow each property khổng lồ transition over a different period of time.