Transition Css Là Gì

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 lớn take place over a period of time. For example, if you change the màu sắc of an element from white khổng lồ black, 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 & final states are implicitly defined by the browser.

*

CSS transitions let you decide which properties to 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).


Which CSS properties can be transitioned?


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 lớn animate some properties, the các mục of animatable properties is limited to lớn a finite set.


Note: The mix of properties that can be animated is changing as the specification develops.


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


Defining transitions


CSS Transitions are controlled using the shorthand transition property. This is the best way to lớn configure transitions, as it makes it easier to lớn avoid out of sync parameters, which can be very frustrating khổng lồ have lớn spend 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 to 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 lớn 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 và the transition actually begins.

The shorthand CSS syntax is written as follows:


div transition: ;

Examples


Simple example


This example performs a four-second font kích cỡ 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;

Multiple animated properties example


body> p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to lớn see these properties animated.p> div class="box">Samplediv>body>
CSS Content
.box border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; transition: width 2s, height 2s, background-color 2s, transform 2s;.box:hover background-color: #FFCCCC; width: 200px; height: 200px; transform: rotate(180deg);

When property value lists are of different lengths


If any property"s list of values is shorter than the others, its values are repeated to lớn make them match. For example:


div transition-property: opacity, left, top, height; transition-duration: 3s, 5s;
This is treated as if it were:


div transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s;
Similarly, if any property"s value các mục 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: opacity, left; transition-duration: 3s, 5s;

Using transitions when highlighting menus


A common use of CSS is khổng lồ 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.

First, we set up the thực đơn using HTML:


nav> a href="#">Homea> a href="#">Abouta> a href="#">Contact Usa> a href="#">Linksa>nav>
Then we build the CSS lớn implement the look & feel of our menu:


nav display: flex; gap: 0.5rem;a flex: 1; background-color: #333; color: #fff; border: 1px solid; padding: 0.5rem; text-align: center; text-decoration: none; transition: all 0.5s ease-out;a:hover,a:focus background-color: #fff; color: #333;
This CSS establishes the look of the menu, with the background và text colors both changing when the element is in its :hover and :focus states:


JavaScript examples


Note: Care should be taken when using a transition immediately after:

adding the element to lớn the DOM using .appendChild() removing an element"s display: none; property.

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


Using transitions to lớn make JavaScript functionality smooth


Transitions are a great tool to lớn make things look much smoother without having to do anything to lớn your JavaScript functionality. Take the following example.


p>Click anywhere to lớn move the ballp>div id="foo" class="ball">div>
Using JavaScript you can make the effect of moving the ball lớn a certain position happen:


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. Showroom 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;

Detecting the start và completion of a transition


You can use the transitionend event to detect that an animation has finished running. This is a TransitionEvent object, which has two added properties beyond a typical sự kiện 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.

Xem thêm: Software Reporter Tool Là Gì ? ? Software Reporter Tool Là Gì

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.


Specifications


Specification Status bình luận
CSS Transitions Working Draft Initial definition

See also