Getting started with CSS animations
Tags: css, beginners, tutorial, webdev
Published: 2020-02-05 00:56:14

## [How to use CSS Transitions](#how-to-use-css-transitions)

So you want to learn more about CSS animations. CSS animations a great and simple once you get to know them. For this example let's use a button. When a cursor hovers over this button we will change the color of the background for 0.3 seconds.

The basics for CSS animations is that the element starts with the starting position like `background-color: transparent;`, then on a hover event or any other CSS event changes to the end position like `background-color: red;`. To do this you need to set a transition with the animation duration. The best way to set transitions is by adding it to the starting position element like this.

```css
.button {
	transition: background-color 0.3s ease;
}
```

A good template for transitions would look like this. The style can be anything like `height`, `background-color`, `color`, `margin`, `padding`, or if you want this transition to apply to everything then set it as `all`. Examples of the transition type would be `ease`, `ease-in-out`, `ease-in`.

```css
.element {
	transition: [style] [duration in seconds]s [transition type];
}
```

With transitions, you can also add more than one different transition on the same element. For example, if you wanted a button background to take 0.3 seconds long and the border-color to take 0.4 seconds for the transition.

The full CSS for this demo button would look like this.

```css
.button {
	background-color: transparent;
	border: 1px solid black;
	border-radius: 5px;
	margin: 1rem;
	padding: 1rem;
	transition: background-color 0.3s ease, border-color 0.3s ease-in;
}

.button:hover. .button:focus {
	cursor: pointer;
	background-color: red;
	border-color: red;
}
```

If you are using SCSS then the code would look like this.

```scss
.button {
	background-color: transparent;
	border: 1px solid black;
	border-radius: 5px;
	margin: 1rem;
	padding: 1rem;
	transition: background-color 0.3s ease, border-color 0.3s ease-in;

	&:hover,
	&:focus {
		cursor: pointer;
		background-color: red;
		border-color: red;
	}
}
```

If you want to see this code in action, here is a Codepen for the code above.

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS animations example" src="https://codepen.io/brettanda/embed/jOPNYjP?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href='https://codepen.io/brettanda/pen/jOPNYjP'>CSS animations example</a> by Brett
 (<a href='https://codepen.io/brettanda'>@brettanda</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## [How to use CSS Keyframes](#how-to-use-css-keyframes)

CSS keyframes can be used for more complex animations that can't be done with a simple transition. With CSS keyframes you can have many things about an element change at different times throughout the animation.

Let's get right into the `@keyframes`, there are two ways to set the progression of keyframes. One is with **from** and **to** where the animation starts **from** and the ends at **to**. The other method is using percentages, where **0%** is the starting styles and **100%** is the end style. Here is an example of both of these methods.

```css
@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slide-in {
	0% {
		opacity: 0;
		transform: translateX(1rem);
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(0);
	}
}
```

With CSS animations you have to specify a few things in for the element getting the animation before a `@keyframes` will work. The minimum for setting a keyframe is adding the name of the keyframe and the duration. You can also choose the iteration count and direction of the animation. Using the `fade-in` keyframe from above this is an example of setting the keyframe.

```css
p {
	animation-name: fade-in;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
```

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Keyframes example" src="https://codepen.io/brettanda/embed/abOoYVe?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/brettanda/pen/abOoYVe'>CSS Keyframes example</a> by Brett
  (<a href='https://codepen.io/brettanda'>@brettanda</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>