I always wanted to learn on how to play with transitions and animations and I have played with it a couple of times, but I never looked into the fundamentals.

Transition properties

From a pure css perspective we need to be aware of a couple of things:

• transition is the shorthand property used to represent the 4 transition-related properties
• transition-property to effectively target the property that will be "animated"
• transition-duration that will give the time of that transition
• transition-timing-function that will specify how intermediate states will be computed
• transition-delay that will define the time when the property is changed

The way to think about this in CSS is actualy simple:

.selector {
  transition: property duration transition-timing-function delay;
}

That means that we only need a line of CSS to define the desired behaviour.

Transition example

Have a look at this example that we will be deconstructing

The good thing about embedding codePen here is that you can actualy see all the code that is building this transition. However, let me break that down for you.

The first thing we did was to create the HTML document

<h1>Playing with CSS transition</h1>
<h2>Parent and child example with transition</h2>
<div class="container">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

After that we have to give it basic styling so that we can start to play with the transition property.

* {
  font-family: Georgia, serif;
  text-align: center;
  background-color: pink;
}
h1 {
  color: #d23669;
}
.container {
  margin: auto;
  display: grid;
  justify-content: center;
}
.parent {
  width: 250px;
  height: 250px;
  background-color: tomato;
  border: 6px solid #d23669;
}
.child {
  width: 50%;
  height: 50%;
  background-color: #d23669;
}

Then we can think about how to move the dark pink square - child element - to the end of the red square - parent element. Effectively we want to transform the child element whenever the user hovers over the parent element.

* {
  font-family: Georgia, serif;
  text-align: center;
  background-color: pink;
}
h1 {
  color: #d23669;
}
.container {
  margin: auto;
  display: grid;
  justify-content: center;
}
.parent {
  width: 250px;
  height: 250px;
  background-color: tomato;
  border: 6px solid #d23669;
}
.child {
  width: 50%;
  height: 50%;
  background-color: #d23669;
  transition: transform 1s ease-out,
}
.parent:hover .child {
  transform: translateX(100%);
}

The expected behaviour is a little bit more complex and we also want to have the color of the child element change from blue to pink and the border of the parent element to have the same behaviour. For that we will need to do the following:

* {
  font-family: Georgia, serif;
  text-align: center;
  background-color: pink;
}
h1 {
  color: #d23669;
}
.container {
  margin: auto;
  display: grid;
  justify-content: center;
}
.parent {
  width: 250px;
  height: 250px;
  background-color: tomato;
  border: 6px solid #d23669;
  transition: border 1s ease-in-out;
}
.child {
  width: 50%;
  height: 50%;
  background-color: #d23669;
  transition: transform 1s ease-out, background-color 1s ease-in-out;
}
.parent:hover .child {
  transform: translateX(100%);
  background-color: pink;
}
.parent:hover {
  border: 6px solid pink;
}

And voila 💥!

This is just the beginign if terms of what you can actually do with the transition property as you will, not only have a very long list of properties that you can target, but also different timing functions that you could tap into to perform your transitions.

Properties transition can target

Not all the properties can be targeted, fortunately it is easy to learn about the properties that transition can target. You can check the following links to learn more:

• MDN web docs
• W3C

The timing function property

This function can be very interesting and by default we can find the linear, ease-in, ease-out and ease-in-out options that will define a transition type of movement for a given element.

However, you can also be very creative on how the html element moves and you explore the Cubic Bezier functions that are available when you inspect your elements using the dev tools on your webrowser.

Just for fun, bellow you can see a couple of nice examples.

This was very helpful for me to better understand the basics of transition property in CSS.

Hope this also can be helpful to you as well.