Css transition multiple properties

Transitioning Multiple Properties

If you’re not using the shorthand, it’s good practice to list all the transition-duration values below the list of properties. This helps you determine which properties match up with which durations, and it helps keep the code more maintainable. For example:

.button   .  transition-property: background, border-radius, color;  transition-duration: .4s, .8s, .4s; > 

When there are three properties and only two duration values:

.button   .  transition-property: background, border-radius, color;  transition-duration: .4s, .8s; > 

. the duration for the third property listed will default to the first time value listed.

If you add a fourth transition property:

.button   .  transition-property: background, border-radius, color, border-color;  transition-duration: .4s, .8s; > 

. the duration for the fourth property will default to the second time value listed.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

Источник

Using CSS transitions

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to 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.

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 animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining an easing 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 be animated and in which way. This allows the creation of complex transitions. However, some properties are not animatable as it doesn’t make sense to animate them.

Note: The auto value is often a very complex case. The specification recommends not animating from and to auto . Some user agents, like those based on Gecko, implement this requirement and others, like those based on WebKit, are less strict. Using animations with auto may lead to unpredictable results, depending on the browser and its version, and should be avoided.

Defining transitions

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 spend lots of time debugging in CSS.

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

Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.

Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.

Specifies a function to define how intermediate values for properties are computed. Easing functions determine how intermediate values of the transition are calculated. Most easing 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.

Defines how long to wait between the time a property is changed and the transition actually begins.

The transition shorthand CSS syntax is written as follows:

Examples

Simple example

This example performs a four-second font 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; > 

Multiple animated properties example

body> p> The box below combines transitions for: width, height, background-color, rotate. Hover over the box to see these properties animated. p> div class="box">Samplediv> body> 

CSS

.box  border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; transition: width 2s, height 2s, background-color 2s, rotate 2s; > .box:hover  background-color: #ffcccc; width: 200px; height: 200px; 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 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 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; > 

div  transition-property: opacity, left; transition-duration: 3s, 5s; > 

Using transitions when highlighting menus

A common use of CSS is to highlight items in a menu as the user hovers the mouse cursor over them. It’s easy to use transitions to make the effect even more attractive.

First, we set up the menu using HTML:

nav> a href="#">Homea> a href="#">Abouta> a href="#">Contact Usa> a href="#">Linksa> nav> 

Then we build the CSS to implement the look and 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 and 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 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 to overcome this limitation is to apply a setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.

Using transitions to make JavaScript functionality smooth

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

p>Click anywhere to move the ballp> div id="foo" class="ball">div> 

Using JavaScript you can make the effect of moving the ball to a certain position happen:

const f = document.getElementById("foo"); document.addEventListener( "click", (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 to the element and 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 and 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 Event object:

A string indicating the name of the CSS property whose transition completed.

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 to monitor for this event:

.addEventListener("transitionend", updateTransition, true); 

You detect the beginning of a transition using transitionrun (fires before any delay) and transitionstart (fires after any delay), in the same kind of fashion:

.addEventListener("transitionrun", signalStart, true); el.addEventListener("transitionstart", signalStart, true); 

Note: The transitionend 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.

Specifications

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS Transition With Multiple Properties

1. the transition Property of CSS
2. How to Trigger Transition in CSS
3. Conclusion

The language used to style a web page is called CSS, which stands for Cascading Style Sheets . CSS explains how HTML components should appear on a screen, paper, or other media.

A lot of work is saved via CSS. It can manage the design of several web pages simultaneously.

In CSS files, external stylesheets are kept.

the transition Property of CSS

CSS transitions are the quickest (and cleanest) way to animate your components. Learn how CSS transitions function in this tutorial and how to use them to create animations.

When a CSS property switches from one value to another over time, a transition takes place. Four CSS properties: transition-property , transition-duration , transition-timing-function , and transition-delay are combined to form the transition property.

.selector  transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay> 

You can also use all four abovementioned properties in just one statement, as shown in the following code example.

.selector  transition: property duration timing-function delay; > 

How to Trigger Transition in CSS

CSS transitions may be triggered immediately by using pseudo-classes like hover (which activates when the mouse is over an element), focus (which activates when a user clicks into an input element or tabs into an element), or active (activates when the user clicks on the element).

Trigger transition With hover

The transition property can be triggered by hover , as shown in the below example.

 html>  head>  style>  body   display: flex;  min-height: 50vh;  justify-content: center;  align-items: center;  >  .button   font-size: 3em;  font-family: inherit;  border: none;  background-color: #33ae74;  padding: 0.5em 0.75em;  transition: background-color 0.5s ease-out;  >  .button:hover   background-color: lightgreen;  >  style>  head>  body>  button class="button">Trigger Transition with hoverbutton>  body>  html> 

Trigger transition With Click

You can activate a transition with a click, as shown in the below example. Just a single click activates the transition color.

 html>  head>  style>  body   display: flex;  min-height: 50vh;  justify-content: center;  align-items: center;  >  .button   font-size: 3em;  font-family: inherit;  border: none;  background-color: #33ae74;  padding: 0.5em 0.75em;  transition: background-color 0.5s ease-out;  >  .button.is-active   background-color: lightblue;  >  style>  head>  body>  button class="button">Trigger Transition with clickbutton>  body>  html> 

const button = document.querySelector('.button'); button.addEventListener('click', _ => button.classList.toggle('is-active')); 

Conclusion

There are a total of four transition properties of CSS. You can use the transition properties of CSS separately and use all four properties in just one statement mentioned in the article above.

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.

Related Article — CSS Transition

Источник