Transitions

[アーティクル]
11/03/2017

Internet Explorer 10 and Windows apps using JavaScript support Cascading Style Sheets, Level 3 (CSS3) Transitions. Transitions enable you to create simple animations by smoothly changing Cascading Style Sheets (CSS) property values over a specified duration of time. For instance, you could vary the size and color of an object over a period of 10 seconds. What you might have previously accomplished using a complicated combination of CSS and JavaScript, you can now do using just CSS. CSS3 Transitions are defined by the World Wide Web Consortium (W3C) in the CSS Transitions Module Level 3 specification, which is currently in the Working Draft stage.

Note The properties and event described in this topic previously required a Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows apps using JavaScript. This prefix is no longer required, but will still be recognized. To ensure compatibility in the future, applications using the Microsoft vendor prefix with transition properties should be updated accordingly.

This topic provides an overview of the properties that make up CSS3 Transitions, and shows you a simple example of transitions in use.

For a list of CSS properties that you can apply transitions to, see Animation and transition properties.

The transition-property property

You use the transition-property property to identify one or more CSS properties to which the transition effect(s) will be applied when a new property value is specified.

Property	Description
transition-property	Indicates the CSS property name or names to which the transition effect is applied when a new property value is specified. The transition-property property can either be set to a comma-separated list of CSS properties or to one of the following values: none No transition effect is applied when a new property value is specified. All transition properties are ignored. all This is the default value. Every property that supports transitions has the transition effect applied when a new value for the property is specified.

transition-property

Indicates the CSS property name or names to which the transition effect is applied when a new property value is specified. The transition-property property can either be set to a comma-separated list of CSS properties or to one of the following values:

none No transition effect is applied when a new property value is specified. All transition properties are ignored.
all This is the default value. Every property that supports transitions has the transition effect applied when a new value for the property is specified.

In addition to applying transitions to the more basic CSS properties such as positioning, color, fonts, and so on, you can also apply transitions to newly-supported CSS properties such as opacity and border-radius, and to 2-D and 3-D transforms.

Be aware that, when you interrupt a transition, it reverses automatically.

The transition-duration property

The transition-duration property defines the length of time that a transition takes.

Property	Description
transition-duration	Specifies one or more comma-separated time values, each of which indicates the length of time that a transition from the old value to the new value takes. Each value is in the form of a floating-point number, followed by a time unit designator (ms or s).

The transition-timing-function property

The transition-timing-function property enables a transition to change speed over its duration by describing how the intermediate values used during a transition will be calculated. You do this by specifying an animation timing function that is based on a cubic Bézier curve, which takes four parameters.

You can either specify the curve explicitly by using the cubic-bezier function and entering the four values manually, or you can choose from several function keywords, each of which corresponds to a commonly used timing function.

Property	Description
transition-timing-function	Specifies one or more comma-separated timing functions that define the intermediate property values used during a transition on a set of corresponding object properties. The possible values can be any of the following. See the transition-timing-function reference page for descriptions of each function. cubic-bezier(x₁,y₁,x₂,y₂) The four parameters of this function must be floating point values between 0 and 1, inclusive. The values correspond to the x- and y-coordinates of the P₁ and P₂ points of the cubic Bézier curve. For properties other than opacity and color, the cubic-bezier curve function accepts y-coordinates outside the standard range of between 0 and 1. This enables you to create "elastic" or "bounce" transition effects. ease This is the default value. This timing function gradually increases in speed at the start, animates at full speed, and then gradually decreases in speed at the end. linear This timing function has a consistent speed from start to end. ease-in This timing function gradually increases in speed at the start. ease-out This timing function gradually decreases in speed at the end. ease-in-out This timing function gradually increases in speed at the start and then gradually decreases in speed at the end. steps This timing function defines a stepped timing function, and takes two parameters. The first parameter specifies the number of intervals; the optional second parameter specifies the point in the interval where the property value changes. The second parameter is constrained to the values start or end, which is the default.

transition-timing-function

Specifies one or more comma-separated timing functions that define the intermediate property values used during a transition on a set of corresponding object properties. The possible values can be any of the following. See the transition-timing-function reference page for descriptions of each function.

cubic-bezier(x₁,y₁,x₂,y₂) The four parameters of this function must be floating point values between 0 and 1, inclusive. The values correspond to the x- and y-coordinates of the P₁ and P₂ points of the cubic Bézier curve. For properties other than opacity and color, the cubic-bezier curve function accepts y-coordinates outside the standard range of between 0 and 1. This enables you to create "elastic" or "bounce" transition effects.
ease This is the default value. This timing function gradually increases in speed at the start, animates at full speed, and then gradually decreases in speed at the end.
linear This timing function has a consistent speed from start to end.
ease-in This timing function gradually increases in speed at the start.
ease-out This timing function gradually decreases in speed at the end.
ease-in-out This timing function gradually increases in speed at the start and then gradually decreases in speed at the end.
steps This timing function defines a stepped timing function, and takes two parameters. The first parameter specifies the number of intervals; the optional second parameter specifies the point in the interval where the property value changes. The second parameter is constrained to the values start or end, which is the default.

The transition-delay property

The transition-delay property enables you to delay the start of a transition, or make it appear as if the transition is already in progress. If the value for the transition-delay property is a negative value, the transition will execute as soon as it is applied, but will appear to have begun execution at the specified offset, or during its play cycle.

Property	Description
transition-delay	Specifies one or more comma-separated offset values within a transition (the amount of time from the start of a transition) before the transition is displayed for a set of corresponding object properties. Each value is in the form of a floating-point number, followed by a time unit designator (ms or s).

The transition property

The transition shorthand property combines the four transition properties described previously into a single property.

Property	Description
transition	Specifies one or more sets of space-delimited transition properties for a set of corresponding object properties. The transition property values must be set in the following order: transition-property transition-duration transition-timing-function transition-delay If you have more than one set of the four transition property values, you must separate each set using a comma.

transition

Specifies one or more sets of space-delimited transition properties for a set of corresponding object properties. The transition property values must be set in the following order:

If you have more than one set of the four transition property values, you must separate each set using a comma.

Example

You can see CSS3 transitions in action by going to Hands On: transitions on the IE Test Drive.

The following simple example shows how to use CSS3 transitions to vary one CSS property applied to a div element over time.

First, we'll create a div element that has some text and apply some styles to it:

<!DOCTYPE html>
<html lang="en-us">

<head>
<style type="text/css">
body {
  padding: 10px;
  font: bold 20pt "Segoe UI";
}
div {
  width: 250px;
  background-color: lime;
  padding: 10px;
}
</style>
</head>

<body>

<div>
  Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor.
  Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.</div>

</body>

</html>

View this page.

Let's make the div slowly disappear over time by varying the opacity property when the user clicks and holds (or touches and holds) the div. First, we'll set the "before" and "after" values for the opacity property. We'll give the div an opacity of "1" to start with, and of "0" when the div is "active." To accomplish this, we'll add opacity properties so that the style section appears as shown here:

...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...

Now, when you click and hold (or press and hold) the green div, it will disappear immediately, for as long as the mouse is clicked (or your finger is held down). View this page.

Now we can add CSS transition properties to make the opacity gradually decrease. First, we identify the property to transition using the transition-property property:

transition-property: opacity;

Next, we'll add a duration for the transition using the transition-duration property:

transition-duration: 5s;

Now, let's define the timing function to use with the transition-timing-function property. To make the div transition evenly, we'll use the linear timing function:

transition-timing-function: linear;

We can also delay the transition for a second using the transition-delay property:

transition-delay: 1s;

These four properties will cause the opacity property to transition evenly for 5 seconds after 1 second. You can also use the transition shorthand property to combine the four properties:

transition: opacity 5s linear 1s;

View this page.

To transition more than one property of an element, set the transition properties to multiple values, each separated by a comma. For instance, we can add a color change to our previous example. First, add a background-color property to the div:active selector. Then, change the transition property as follows:

transition: opacity 5s linear 1s, background-color 2s ease;

This property adds a color transition to purple over two seconds using the ease timing function. There is no delay value, so the transition begins immediately. View this page.

Transitions DOM Events

Internet Explorer 10 and Windows apps using JavaScript define two transition events:

transitionstart

The transitionstart event occurs at the beginning of the transition.

Bubbles: Yes
Cancelable: Yes
Context Info: propertyName, elapsedTime (transitionEvent)

transitionend

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

Bubbles: Yes
Cancelable: Yes
Context Info: propertyName, elapsedTime (transitionEvent)

This example applies transitions to a <div> element, and fires the transitionstart and transitionend events to change the text in the box. Try the example online.

<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>