In the last animations post we spoke about how to make animations with Javascript, this time we’re going to talk about how to make the same thing using CSS3. Worth mentioning that with CSS3 we are going to write less code, in this case we will use the hover selector and a some CSS3 properties. Next, I’ll show you how to implement this animation with CSS3.

As we would do it with Javascript, we need a HTML document, defined as follows:

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-4">
      <img alt="Pozting thumbnail" class="center-block img-responsive" src="http://placehold.it/360x274">
      <div class="title-project text-center">
        <h3 class="text-white text-center">Swapps</h3>
        <p class="text-left">Swapps is a software developing company for web and mobile devices, which creates disruptive products, focused on innovation.</p>
        <a class="btn btn-primary" href="#">Read more</a>
      </div>
    </div>
  </div>
</div>

Unlike the previous example, we will not need Javascript but we are going to write some CSS lines, here is the code:

We define the initial properties to our class, they’re almost the same styles we used in the previous post but in this case we are not going to use the start class.

.title-project{
  width: 100%;
  color:#fff;
  display: block;
  background: rgba(010,010,010,0.7);
  padding: 10px 20px;
  margin-top: -46px;
  position: relative;
  h3{
    margin: 0px;
    margin-bottom: 7px;
    font-size: 25px;
  }
}

Now we need to do the animation in CSS3, so we will rely on the following properties:

.title-project{
  &:hover{
    height: 275px;
    z-index:999;
    position:relative;
    -webkit-animation:mymove 1s;
    animation:mymove 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
}
@-webkir-keyframes mymove{
  from{bottom: 0px;}
  to{
    bottom: 228px;
    padding-top:60px;
  }
}
@keyframes mymove{
  from{bottom: 0px;}
  to{
    bottom: 228px;
    padding-top:60px;
  }
}

The hover selector is used to select elements when we pass the mouse over them, and apply properties only in that case .title-project:hover will be activated when we mouse over an element with that class, so we can use the animation property to generate animations. We need to give to this property the name of animation that will be created and the time the animation will last.

It’s important to use these properties: animation-fill-mode: forwards, which will force the animation to stay in its final position, in this case the final position is bottom: 228px. Another important property is animation-iteration-count: 1, which indicates the time that the animation is going to be repeated while we keep the cursor above of the element.

We can give .title-project the property animation-timing-function, with ease-out as the value, so we can adjust the way the animation will show up.

Last, we will create a mymove animation, and the keyword @keyframes is responsible of creating the animation. This rule use two parameters, from that indicate the origin of the animation, and to that indicate where it will go, we will assign the value bottom in both cases.

Note that in CSS3 we need to use prefixes, to ensure cross-browser compatibility, in this case the prefix used is -webkit-, it will work in Google Chrome, Safari and Opera.

So, we can see that making an animation in CSS3 can be really easy, but we should remember that not all browsers are compatible with CSS3. Because of this, we may have the risk of implementing an animation that doesn’t show well in a specific browser when using properties not yet supported. So to ensure full compatibility in all browsers, it can be better to use Javascript to make animations. Anyway, the decision is up to you!

For view the result:

See the Pen Animation with css3 by Bryan (@brayan15) on CodePen.