CSS animations allow you to bring your website to life by animating different elements on the page. It is a powerful tool that can be used to create subtle animations that enhance the user experience, or more complex animations that are the focal point of the page.

Today, we’re going to walk through everything you need to know to get up and running creating your own CSS animations. The first thing you’ll need to know is the @keyframes rule…

 rule in CSS is used to define the animation that is applied to an element. It is used to specify the styles for different points in the animation sequence, also called keyframes.

The animation-name is a name that you assign to the animation so that it can be applied to an element using the 

 property. The keyframe-selector is a percentage value or a "from" or "to" value which represents the point in the animation sequence that the styles will be applied to.

To apply the animation defined in a @keyframes rule, you can add the 

 property to an element. For example, if we have these keyframes defined:

We can apply this animation to an element with the animation-name property by simply doing this:

But there’s a catch! The default duration of any given animation is 0 seconds. So if you do not specify an 

, you will not be able to see the animation take place. So if we update our previous example to look like this:

Now we should be able to see the paragraphs’ color changing from red to blue over the course of 2 seconds.

By default, the animation will run once, and then the element will return to the styles it had before the animation began. The 

 property lets us specify how many times the animation should run. You can use a number, or the 

 keyword to have the animation continually run.

With the previous example, our paragraphs will go from red to blue over the course of 2 seconds. Then it will jump back to red and repeat the animation indefinitely. What if we wanted the animation to run from red to blue, then run in reverse, so it transitions nicely back from blue to red? This is where the 

 property comes into play. We can specify 4 different values for the animation-duration property:

: run from the first keyframe (0%) to the last (100%)

: run from the last keyframe (100%) to the first (0%)

: take turns running the animation once forward, then once in reverse, etc.

: take turns running the animation once backwards, then once forwards, etc.

 CSS property is used to set the timing function for an animation. The timing function controls the speed at which an animation progresses through its keyframes. It can be used to create a smooth or gradual transition between keyframes, or to create a more sudden or abrupt transition.

There are several predefined timing functions that can be used with the 

: starts slow, speeds up, and then slows down again (default value)

: starts slow, speeds up, and then slows down again

Additionally, you can also create your own custom cubic-bezier timing function using the 

 are the coordinates of the two control points of the cubic-bezier curve.

 CSS property is used to specify how an element should be styled before and after an animation. It can be used to control the final state of an element after the animation has completed.

There are several predefined values that can be used with the 

: (default value) the animation has no effect on the element before or after the animation

: the element retains the style values set by the last keyframe of the animation after the animation has completed.

: the element is set to the style values of the first keyframe of the animation before the animation starts.

: the element is set to the style values of the first keyframe of the animation before the animation starts and retains the style values set by the last keyframe of the animation after the animation has completed.

The final CSS property related to animations is 

. This property is used to specify the amount of time that should elapse before an animation starts. It can be used to create a delay between the time an element is loaded and the time the animation begins.

Ok! Those are the basics of CSS animations. Now, let’s get some practice by building a cool animation step-by-step.

Now, let’s give the box some initial styles

Then we can define the keyframes for our animation

In this animation, we are using percentage values to get more fine-grained control of the box styles throughout the animation. We are simultaneously moving the box along the x-axis, rotating it about its origin, scaling it up and down, and changing its color!

Now let’s apply the animation to the box

And voila! The box is now animating! We’ve set it up to take 3 seconds to complete one lap through the keyframes, and to continue indefinitely.

If you’d like to see my working example, feel free to checkout my 

Understanding the basics of CSS animations

CSS Animations 101

Today we’re going to be looking at how to make a super-easy-to-implement, responsive, grid layout. Grid layouts are a very common design pattern for displaying an array of data in a visually appealing way. Whether it’s a photo gallery, or an array of card tiles, knowing how to build a layout like this is an awesome skill to have as a front-end developer.

Let’s start by looking at the final result of what we’ll be building: a grid! Try resizing the window to see how the grid items will automagically wrap to new lines and the number of columns in the grid will update.

Let’s start by setting up some example markup, then we’ll walk through the css line-by-line.

This HTML is pretty straightforward. First we have a “container” div. This is the div on which all the grid styles will be applied...

Within the container we have children divs, each with a class of “item”. You can imagine these grid items could be photos, links, or anything else you might want to display in a grid layout.

Now let’s add the css to make this a responsive grid.

 on the parent container element. This tells the parent to display all of its children according to the two dimensional grid system. Setting this line of css will not change the way anything looks. In order for the grid to actually begin taking shape, we need to define rows and columns.

Here we are setting all of our rows within the grid to have a default height of 100 pixels.

With CSS grid, it is common to see rows defined with the 

 property. This lets you specify how many rows your grid should have, and what height each row should occupy. For example, if you were to have 

, this would tell the grid to have its first row fill 100 pixels, the second row fill 50% of the available space within the container, and the last row to fill only the space necessary to fit its content.

Now let’s say you only explicitly defined one row by setting 

 ... How much space will items take up if they have to wrap to a new row within the grid, but there is no explicitly defined row height? Well, by default they would be set to 

 so that it will display all the content. However, you can override this default height for implicitly created rows using the 

 property. That is what I’m doing above. Essentially, I don’t want to explicitly define 

 rows are in the grid, but I want every implicitly created row to be 100 pixels tall.

Now let’s get to the really awesome one-liner that makes this grid fantastically responsive... Let’s define our columns!

 behaves exactly the same way that I described 

 except it lets you define how many columns you want your grid to have, and how 

 , my grid would then have its first column be 100 pixels wide, the second would fill 10% of the available width of the parent container, and the last column would be 5 rems wide.

There is one new unit that can be used when defining grid rows and columns that you should be aware of. It is the “fractional unit”, denoted with 

 . A fractional unit works very similarly to how the 

 property works within a flex container. Specifying 

 basically says, “fill up whatever space is remaining in the container”.

If I were to use a fractional unit when specifying my grid columns, it might look something like this: 

. This would make the first column in my grid 100 pixels wide, and the second column would take up all the remaining available width in the parent container.

But what if I defined more than one column with a fractional unit? Let’s say I had a grid with the following defined columns: 

. In this case, the first column would still take up 100 pixels, but all the remaining available space would get divided up among the latter two columns, with twice as much of the available space going to the third column. So if my grid container was 400 pixels wide, and I defined the same columns as above, the first column would be 100px wide, the second would be 100px wide, and the third would be 200px wide.

Repeat is a CSS function that lets you define multiple columns or rows in a shorthand way. Instead of defining 5 columns like this: 

grid-template-columns: 100px 100px 100px 100px 100px;

. The first argument is how many times you want the value(s) to be repeated, and the second is the value(s) to be repeated.

Minmax is another CSS function used with grids. It lets you specify a 

 of space that rows or columns can occupy. The first argument is the minimum width or height for your column or row and the second argument is the maximum. For example, 

grid-template-columns: 100px minmax(100px, 1fr);

 would define the first column to always be 100 pixels wide, and the second column would fill all the remaining space, but never shrink below 100 pixels.

The repeat and minmax functions can be used together to specify some number of columns or rows, each with a fluid width/height. 

grid-template-columns: repeat(12, minmax(100px, 1fr));

 would define twelve columns, each taking up an equal amount of available width. However, none of the columns would shrink below 100px, so you can imagine how all of these columns would not fit on a smaller screen and would result in overflow.

So how do we make the number of columns variable so that the grid can grow/shrink depending on the size of the user’s screen? Thankfully, CSS grid has two handy values we can use for defining responsive rows and columns. These values are 

Let’s start by explaining how auto-fill works. When you use ‘auto-fill’ as the first argument to the repeat function, it will fill the grid container with the largest possible number of columns that can fit into sed container without overflowing. The key thing to note about auto-fill is that if you have a grid with enough space for more columns than there are items within the grid, auto-fill still creates empty columns, thus “filling” the available space with as many columns as it can.

Here’s an example of using auto-fill, but not having enough children to occupy all the created columns. As you can see, it still creates an empty column. Auto-fill basically says, “Add as many columns as I can without overflowing, even if the columns are empty!”.

 works the same as auto-fill in that it tries to add as many possible columns as can fit without overflowing. The only difference is that it will collapse any empty columns to 

 the actual content into the grid nicely. Here’s the same grid, as the image above, but with auto-fit instead of auto-fill:

Technically speaking, there are still four columns in this grid... the empty columns have just been collapsed. This is the key distinction between auto-fill and auto-fit: how it handles empty rows/columns. This might be confusing at first because when you have enough grid items to fill all the possible columns, auto-fill and auto-fit behave exactly the same. The only visible difference can be seen when you have more rows/columns than grid items. If you want a better explanation of the difference between auto-fit and auto-fill, I highly recommend this css-tricks 

Wow, that was a lot of explanation for one line of CSS! But now we have a good understanding of what 

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

 is really doing. It basically will fill our grid with as many columns that can fit without overflowing, where each column shares an equal amount of the available width, but never shrinks below 200 pixels. Whew!

The only additional thing I’ve added to our grid is spacing between the items.

 property specifies how much space should be between the rows and columns. If you wanted the spacing between the rows to be different than the spacing between the columns, you could use the individual 

Then I simply added some padding around the grid to match the grid-gap... And just like that, we have a beautifully responsive grid!

Create a responsive grid layout with CSS grid

wilson staley

Hi There! 👋

CSS Animations 101

Easy Responsive Grid