Today, the number of available applications to accomplish our tasks is seemingly endless. To the point where I’m pretty sure you can go to ProductHunt any day and find something, you couldn’t believe you haven’t had already. That’s just the state of the space we’re in today. That does bring us to a question though; what separates things?
The answer is stellar UX. User experience can make or break an application today, especially in an emerging market. So to help with that we’re going to take a look at the CSS property transition. This is great because it allows you to add smooth animations with no additional knowledge required. Let’s take a look!
.TestBlock {
background-color: green;
height: 200px;
width: 200px;
transition: background-color 2s;
}
.TestBlock {
background-color: red;
}
So simple! If you can’t tell by the code above, what we’re doing is transitioning our background color on hover. The browser will take care of all the in-between states, and all we had to do was specify what we wanted to transition and how long it should take.
For most, this hopefully is a refresher. However, for the people that weren’t familiar, get to using it in your apps to make some amazing UIs!