CSS: Transitions

#BuildTogether Day 36/100

Today has been an okayish day so maybe will skip talking about it and go straight to the topic 🙃

Transitions are a simpler way to add animations to web pages, while more complex animations require scripts and advanced properties.

transition property can be used to add effects like increasing the size of the image, changing the color of an element on hover, and more.

There are 4 transition values that can be used:

• transition-delay: Specifies the delay of the transition effect.
• transition-duration: Specifies the duration of the transition effect.
• transition-property: Specifies which CSS property the transition effect is applied to.
• transition-timing-function: Specifies the speed curve of the transition effect.

It is recommended to group the properties in one property if we are using more than one, for eg,

/* This code */
.element {
  transition-duration: 1.5s;
  transition-timing-function: ease-in;
}

/* is better written this way */
.element {
  transition: 1.5s ease-in;
}

Some different ways of mix-match of the properties are below:

.element {
  /* property duration timing-function delay */
  transition: border 1.2s ease .35s;

  /* property timing-function duration delay */
  transition: all ease-in-out .5s .5s;

  /* property duration timing-function */  
  transition: margin .5s linear;

  /* duration timing-function delay */
  transition: 2.3s ease-in 1s;

  /* duration delay timing-function */
  transition: .75s .3s ease-out;

  /* duration delay */
  transition: 1.2s 1.2s;
}

The rules to keep in mind:

• The first text represents the CSS property
• The first number represents the duration
• The second number represents the delay
• The second text represents the timing-function
• If the CSS property is defined it always has to come first
• The timing-function can be placed before, after, or in between the duration and delay

Property and duration

The property and duration values define which property we want to change and how long the effect should last. It's possible to animate many different properties:

The below code-pen shows different ways to combine two values and create animations:

The duration value must be a non-negative number followed by an “s”, which stands for seconds or “ms”, which stands for milliseconds. If you forget the “s”, the effect will not work.

all is specified if the same transition effect is needed for every property, otherwise, CSS property is specified if the effect is intended for that property, otherwise omitting the CSS property value or using all applies the same transition to every property.

Timing Function

Thetiming-function value specifies the speed curve over which the transition occurs. Some pre-defined values are as below:

• ease: The transition starts slow, increases in speed towards the middle, and decreases towards the end. It's the default value.
• linear: The transition occurs at the same speed throughout.
• ease-in: The transition begins slowly.
• ease-out: The transition ends slowly.
• ease-in-out: The transition starts and finishes slowly. Unlike ease, it does not increase the speed towards the middle

Both transition and transform properties can be applied together, for example, changing background-color and increasing the size. The properties are separated using commas, check the following codepen:

.login {
 -webkit-filter: blur(0px);
}

The above code can be applied, if a blur effect is noticeable on the element.

Try replacing the ease with other values and notice the change in effect.

Delay

The delay value specifies how much time (in seconds (s) or in milliseconds (ms)) should pass before our effect begins.

If you noticed the effect happens if you keep hovering for at least 900ms, and does not happen at all if the mouse is moved away quickly.

Below is an exercise to Flip a card ;)

Please feel free to follow my 100 Days of Journey, or much better follow along :D

The Journey of #100DaysOfCode (@henna_dev)