States and Animation with CSS

---

States and Animations in CSS

CSS also gives us the ability to animate our elements. Especially when used in conjunction with JavaScript, which we'll learn more about in our next module, you can create some pretty powerful, lightweight interactions on your site. We'll cover two concepts in this lesson: state and animations.

State

State is a common term in computer science. Typically, it's a reference to the values of an object; in CSS, state refers to the contexts by which a certain element can be described. We write rules for states using something called a pseudo-class selector. They're always denoted by a colon as we can see below:

1/* The rules for the button */
2.actionButton {
3  border: solid 1px black;
4  padding: 10px 20px;
5  border-radius: 9px;
6  cursor: pointer;
7}
8
9/* The rules that change on a user's hover */
10.actionButton :hover {
11  border: solid 1px tomato;
12  color: tomato;
13}

Here, we can see the button's text and border colors change when its state changes. This change will be immediate.

Transitions

We can also affect the way in which the state-change animations occur. For example, let's shift the button up a bit on a user's hover but do so a bit more smoothly:

1.actionButton {
2  border: solid 1px black;
3  padding: 10px 20px;
4  border-radius: 9px;
5  cursor: pointer;
6  transition: transform 0.2s;
7}
8
9/* The rules that change on a user's hover */
10.actionButton :hover {
11  border: solid 1px tomato;
12  color: tomato;
13  transform: translateY(-10px);
14}

In our button's initial style rules, we've added a transition property. The value is that on any transform, the duration should be 0.2 seconds instead of instant. This way, our button will glide up smoothly and come back down at the same rate.

We can also combine transformations and make more dynamic interactions.

1.actionButton {
2  border: solid 1px black;
3  padding: 10px 20px;
4  border-radius: 9px;
5  cursor: pointer;
6  transition: transform 0.2s;
7}
8
9/* The rules that change on a user's hover */
10.actionButton :hover {
11  border: solid 1px tomato;
12  color: tomato;
13  transform: translateY(-10px) rotateZ(-2.5deg) scale(1.03);
14}

---

Previous and Next Lessons: