Learn to Code via Tutorials on Repl.it!

← Back to all posts
transition css
h
codeitfast (59)

Making transitions in CSS :D

Transitions are a cool way of making your HTML website look much better (with a little CSS)

  • you need:
  • HTML knowledge
    *some CSS knowledge

Let's start!😁

Part 1: HTML

We are going to create a rectangle using the '<div>' function. I called mine fakeImage. However, you can use other tags, like buttons, links, and more!

here is what it looks like (HTML):
<div class = "fakeImage"></div>

easy, right?

Now, we need to make our rectangle.

Part 2: CSS

my colors:

In the CSS area, write:

.fakeImage{
  background-color: #76C4Ae;
  width: 50px;
  height: 50px;
}

Let's look at each line.

.fakeImage{}
you use . when you want the HTML class (multiple objects) to look different. If it was <div id = "fakeImage"></div>, you want to use #fakeimage{} instead.

Next, we say that the background is this turquoise color. I like it quite a lot!
Then, we set the size to 50px by 50px. This is pretty straightforwards.

Part 3: CSS hover

underneath this, we are going to write:

.fakeImage:hover{
  background-color: #D86C70;
  width: 100px;
  height: 75px;
}

.fakeImage:hover means that this css code is only run if the mouse is touching our rectangle. Try it out!

Besides the first line, this code is similar to the one at the top. However, it is a red, and a different size.

Part 4: Transitions

The moment you all have been waiting for! A transition looks like this:

-webkit-transition: thing that is changing and how long it takes to change, second thing, etc..

Underneath height: 50px;' write '-webkit-transition: background-color 500ms, height 500ms, width 500ms;

Over 500 milliseconds, the color goes to a cyan, and the height and width becomes 50px.

Now let's do this on the bottom line!

Underneath height: 75px;, write -webkit-transition: height 500ms, width 500ms, background-color 500ms;

Thanks for reading!

This is my first tutorial. How can I make it better? Thanks!

Comments
hotnewtop
codeitfast (59)

@DynamicSquid You've been on repl.it for a while, right? How can I make my tutorials more concise? Thanks!

DynamicSquid (4893)

@codeitfast Oh, this tutorial is great! I guess the more tutorials you write, the more you'll find which style matches you :)

codeitfast (59)

@DynamicSquid well, what should I make a tutorial about?

DynamicSquid (4893)

@codeitfast It's really up to you, whatever interests you the best