Transition css là gì, tìm hiểu transition trong css


CSS transitionsprovide a way lớn control animation tốc độ when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to lớn take place over a period of time. For example, if you change the color of an element from trắng khổng lồ blachồ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: Transition css là gì, tìm hiểu transition trong css

Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and 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 quick at the beginning, slow at the end).

The Web author can define which property has to lớn be animated & in which way. This allows the creation of complex transitions. As it doesn"t make sense to lớn animate some properties, the danh sách of animatable properties is limited to lớn a finite phối.

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

CSS Transitions are controlled using the shorthvà transition property. This is the best way to lớn configure transitions, as it makes it easier khổng lồ avoid out of sync parameters, which can be very frustrating lớn have sầu to lớn spover lots of time debugging in CSS.

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

transition-property Specifies the name or names of the CSSproperties lớn which transitions should be applied. Only properties listed here are animated during transitions; changes to lớn 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 khổng lồ allow each property to transition over a different period of time. transition-timing-function Specifies a function lớn define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose easing from Easing Functions Cheat Sheet. transition-delay Defines how long to wait between the time a property is changed and the transition actually begins.

The shorthvà CSS syntax is written as follows:

div transition: ;
This example performs a four-second phông size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:

#delay font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s;#delay:hover font-size: 36px;
CSS border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; transition: width 2s, height 2s, background-color 2s, transkhung 2s;.box:hover background-color: #FFCCCC; width: 200px; height: 200px; transform: rotate(180deg);

If any property"s menu of values is shorter than the others, its values are repeated khổng lồ make them match. For example:

div transition-property: opađô thị, left, top, height; transition-duration: 3s, 5s;This is treated as if it were:

div transition-property: opađô thị, left, top, height; transition-duration: 3s, 5s, 3s, 5s;Similarly, if any property"s value list is longer than that for transition-property, it"s truncated, so if you have the following CSS:

div transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s;This gets interpreted as:

div transition-property: opathành phố, left; transition-duration: 3s, 5s;
A comtháng use of CSS is to lớn highlight items in a menu as the user hovers the mouse cursor over them. It"s easy to lớn use transitions to lớn make the effect even more attractive sầu.

Xem thêm: Sóng Phẳng Là Gì ? Nghĩa Của Từ Sóng Phẳng Trong Tiếng Anh 76209115 Baigiang

Before we look at code snippets, you might want to take a look at the live sầu test (assuming your browser supports transitions).

First, we set up the menu using HTML:

nav> a href="#">Homea> a href="#">Abouta> a href="#">Liên hệ Usa> a href="#">Linksa>nav>Then we build the CSS khổng lồ implement the look & feel of our menu. The relevant portions are shown here:

a color: #fff; background-color: #333; transition: all 1s ease-out;a:hover,a:focus color: #333; background-color: #fff;This CSS establishes the look of the menu, with the background & text colors both changing when the element is in its :hover và :focus states.

Care should be taken when using a transition immediately after:

adding the element khổng lồ the DOM using .appendChild() removing an element"s display: none; property.

This is treated as if the initial state had never occurred and the element was always in its final state. The easy way khổng lồ overcome this limitation is lớn apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intkết thúc to lớn transition to.

Transitions are a great tool lớn make things look much smoother without having khổng lồ vì anything khổng lồ your JavaScript functionality. Take the following example.

p>Cliông chồng anywhere lớn move the ballp>div id="foo" class="ball">div>Using JavaScript you can make the effect of moving the ball khổng lồ a certain position happen:

var f = document.getElementById("foo");document.addEventListener("click", function(ev) = "translateY("+(ev.clientY-25)+"px)"; += "translateX("+(ev.clientX-25)+"px)";,false);With CSS you can make it smooth without any extra effort. Add a transition to lớn the element & any change will happen smoothly:

.ball border-radius: 25px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s;

You can use the transitionover event lớn detect that an animation has finished running. This is a TransitionEvent object, which has two added properties beyond a typical Event object:

propertyName A string indicating the name of the CSS property whose transition completed. elapsedTime A float indicating the number of seconds the transition had been running at the time the event fired. This value isn"t affected by the value of transition-delay.

As usual, you can use the addEventListener() method khổng lồ monitor for this event:

el.addEventListener("transitionend", updateTransition, true);You detect the beginning of a transition using transitionrun (fires before any delay) và transitionstart (fires after any delay), in the same kind of fashion:

el.addEventListener("transitionrun", signalStart, true);el.addEventListener("transitionstart", signalStart, true);
Note: The transitionend sự kiện doesn"t fire if the transition is aborted before the transition is completed because either the element is made display: none or the animating property"s value is changed.
Last modified: May 10, 2021, by MDN contributors

Change your languageSelect your preferred language English (US)EspañolFrançais日本語한국어Português (doBrasil)Русский中文 (简体)正體中文 (繁體) Change language
Learn CSS CSS first steps CSS building blocks Styling text CSS layout Reference Modules Properties Selectors Pseudo-classes Pseudo-elements At-rules Types Guides Animations Backgrounds và Borders Box alignment Box Mã Sản Phẩm Columns Conditional rules CSSOM view Flexbox Flow layout Fonts Grid Images Lists và counters Logical properties Media queries Positioning Scroll snap Shapes Text Transforms Transitions Layout cookbook Tools