All CSS3 HTML5
Inaam  

Fade out transition effect using CSS3

CSS3 is useful for creative designs and effects.In this tutorial I will show you how to create fade out transition effect using CSS3. You can see demo link below.

View demo – here
Download Code – here
Let’s see our HTML,

index.html
<div class="faces">
    <div class="back-face">
        <i rel="1" class="face-1 off"></i>
        <i rel="2" class="face-2 off"></i>
        <i rel="3" class="face-3 off"></i>
        <i rel="4" class="face-4 off"></i>
        <i rel="5" class="face-5 off"></i>
        <i rel="6" class="face-6 off"></i>
        <i rel="7" class="face-7 off"></i>
        <i rel="8" class="face-8 off"></i>
        <i rel="9" class="face-9 off"></i>
        <i rel="10" class="face-10 off"></i>
        <i rel="11" class="face-11 off"></i>
        <i rel="12" class="face-12 off"></i>
        <i rel="13" class="face-13 off"></i>
        <i rel="14" class="face-14 off"></i>
        <i rel="15" class="face-15 off"></i>
    </div>
</div>

Here we have simply added div with 15 icons and based on icon images is assigned using css.
See Here:

style.css
.back-face i.face-1{
  background-image:url("images/guy-1.jpg");
}

So, how is this working?

On hovering the image class “on” is added and on out “off” class is added and on is removed.These two classes have their respective css rules, see below.

See below hover event for adding on and off class.

site.js
$( document ).ready(function() {
    $('.back-face i').hover(
        function () {
            $(this).removeClass("off");
            $(this).addClass("on");
        },
        function () {
            $(this).removeClass("on");
            $(this).addClass("off");
        }
    );
});

Now will show you CSS part, see below syntax to write transition.

style.css
div.faces i {
  cursor: pointer;
  height: 50px;
  padding: 2px 2px 2px 2px;
  -webkit-transition: opacity 3500ms ease 100ms;
  -o-transition: opacity 3500ms ease 100ms;
  transition: opacity 3500ms ease 100ms;
  -webkit-transform: translateZ(0);
  width: 50px;
  display:block;
  float:left;
}
div.faces i.off {
  opacity: 0;
  filter: alpha(opacity=0);
}
div.faces i.on {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 200ms ease 0ms;
  -o-transition: opacity 200ms ease 0ms;
  transition: opacity 200ms ease 0ms;
}
  • Transition Explanation :- transition: opacity 200ms ease 0ms; : property duration timing-function delay|initial|inherit;

What we do when class is “off”?

  • opacity: 0 :- Adding opacity for an image with 0 value means image is not visible.
  • transition: opacity 3500ms ease 100ms :- using transition because it is changing from one style to another, without using Flash animations or JavaScripts.

If it is “on” then?

  • opacity: 1 :- Image is visible because opacity is 1.
  • transition: opacity 200ms ease 0ms :- using transition because it is changing from one style to another, without using Flash animations or JavaScripts.

Inaam

4 thoughts on “Fade out transition effect using CSS3”

  1. Сергей Хваль

    Did you hear about :hover pseudo class?

    Reply

    1. Inaam Hussain

      Yes you are right we can use “:hover”. but in this tutorial i have used “on” and “off” classes for distinguished and better explanation. and applied css based on that.
      For hover simply have to do below changes in style.css,

      div.faces i {
      cursor: pointer;
      height: 50px;
      padding: 2px 2px 2px 2px;
      -webkit-transition: opacity 3500ms ease 100ms;
      -o-transition: opacity 3500ms ease 100ms;
      transition: opacity 3500ms ease 100ms;
      -webkit-transform: translateZ(0);
      width: 50px;
      display:block;
      float:left;
      opacity: 0;
      filter: alpha(opacity=0);
      }
      div.faces i:hover {
      opacity: 1;
      filter: alpha(opacity=100);
      -webkit-transition: opacity 200ms ease 0ms;
      -o-transition: opacity 200ms ease 0ms;
      transition: opacity 200ms ease 0ms;
      }

      Reply

  2. 胡忠晞（Jax）

    you can use :hover selector

    Reply

    1. Inaam Hussain

      Yes right. please refer above comment and explanation.

      Reply

Leave A Comment