CSS transitionsprovide a way khổng lồ control animation speed 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 White 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, all of which can be customized.
Bạn đang xem: Transition css là gì
Animations that involve transitioning between two states are often called implicit transitions as the states in between the start và final states are implicitly defined by the browser.
CSS transitions let you decide which properties khổng lồ animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), và 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 and in which way. This allows the creation of complex transitions. As it doesn"t make sense khổng lồ animate some properties, the list of animatable properties is limited to lớn a finite phối.
The tự động 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 và others, like those based on WebKit, are less strict. Using animations with automay lead lớn unpredictable results, depending onthe browser and its version, & 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 to have 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 to lớn 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 khổng lồ all properties during the transition, or multiple values lớn allow each property to transition over a different period of time. transition-timing-function Specifies a function to 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 lớn wait between the time a property is changed & the transition actually begins.
The shorth& CSS syntax is written as follows:
div transition: ;
This example performs a four-second phông form size transition with a two-second delay between the time the user mouses over the element & 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;
.box 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 các mục of values is shorter than the others, its values are repeated khổng lồ make them match. For example:
div transition-property: opathành phố, left, top, height; transition-duration: 3s, 5s;
This is treated as if it were:
div transition-property: opathành phố, left, top, height; transition-duration: 3s, 5s, 3s, 5s;
Similarly, if any property"s value menu is longer than that for transition-property, it"s truncated, so if you have sầu the following CSS:
A common 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 khổng lồ make the effect even more attractive sầu.
Before we look at code snippets, you might want lớn take a look at the live sầu demo (assuming your browser supports transitions).
First, we set up the thực đơn using HTML:
Then we build the CSS lớn implement the look and feel of our thực đơn. 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 to the DOM using .appendChild() removing an element"s display: none; property.
This is treated as if the initial state had never occurred và the element was always in its final state. The easy way to 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 lớn transition to.
var f = document.getElementById("foo");document.addEventListener("click", function(ev) f.style.transform = "translateY("+(ev.clientY-25)+"px)"; f.style.transform += "translateX("+(ev.clientX-25)+"px)";,false);
With CSS you can make it smooth without any extra effort. Add a transition khổng lồ 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 transitionend event to 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 sự kiện 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:
You detect the beginning of a transition using transitionrun (fires before any delay) & transitionstart (fires after any delay), in the same kind of fashion:
el.addEventListener("transitionrun", signalStart, true);el.addEventListener("transitionstart", signalStart, true);
Note: The transitionkết thúc event 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: Jun 11, 2021, by MDN contributors
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 & Borders Box alignment Box model Columns Conditional rules CSSOM view Flexbox Flow layout Fonts Grid Images Lists and counters Logical properties Media queries Positioning Scroll snap Shapes Text Transforms Transitions Layout cookbook Tools