CSS transitions allows you to change property values smoothly, over a given duration.

---

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).

Hover over the teal box, to see an example of a transition effect:

Another example of a transition effect:

Easing Functions

Easing functions specify the rate of change of a parameter over time.

Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

This page helps you choose the right easing function.

Defining transitions

Transitions are defined by the following properties:

• Property Name
  • 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. (ex. transition: background-color)
  • *note: you can specify all to select all of the elements properties
• Duration
  • 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. (ex. 2s)
• Timing Function
  • 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.
  • MDN "CSS easing-function"            Easy Transition Functions
• Delay
  • Defines how long to wait between the time a property is changed and the transition actually begins. (ex. 1s)

---

The CSS syntax for transitions, is written as follows:

• div {
  • div property
  • div property
  • div property
  • transition: < property(s) (to be transitioned)> < duration> < timing-function> < delay>;
  }

You can specify multiple transition properties by specifying multiple property names, such as: transition: background-color border-radius 1s, all specified on one line.

You can also specify different timing properties, such as: transition: background-color 2s, border-radius 1s.

---

An example of different Timing Functions | Again, mouse hover over the boxes to see the different Timing Functions.

So all four boxes have the same property name, and the same timing (3s), but they get from point A to point B in very different ways. This is because of the transition Timing Function.

Here's the code:

---

HTML
• < section>
  • < div> < /div>
  • < div> < /div>
  • < div> < /div>
  • < div> < /div>
• < section>

CSS
• section div {
  • width: 50px;
  • height: 50px;
  • background-color: brown;
  • transition: margin-left 3s
• }

• section:hover div {
  • margin-left: 500px;
• }

• section div:nth-of-type(1) {
  • transition-timing-function: ease-in;
• }

• section div:nth-of-type(2) {
  • transition-timing-function: ease-out;
• }

• section div:nth-of-type(3) {
  • transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
• }

• section div:nth-of-type(4) {
  • transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
• }

*note: if we wanted all four boxes to have the same properties for the transition, we could have written the code on one line, such as, transition: margin-left 3s ease-in;.
Once again, here is a link to some Easy Transition Functions.

Basic Button Manipulation

CLICK ME

---

This effect is done with simple CSS, changing the colors and shadow properties, and a simple Transform to change the button's position.

HTML
• < button>CLICK ME< /button>

CSS
• button
  • margin: 20px auto 40px;
  • padding: 10px 20px;
  • color: white;
  • font-weight: bold;
  • background-color: #689996;
  • border: 1px solid black;
  • border-radius: 15px;
  • box-shadow: 2px 2px 6px #888888;
• button:hover
  • color: black;
  • background-color: #5eeee4;
  • box-shadow: 2px 2px 6px black inset; | (change the shadow to inset)
  • transform: translate(6px, 6px); | (move the same amount as the shadow size)