Page Widget How to - Create menu item fade-in on page load, fade-out on hover

Question

We would like to know how to create menu item fade-in on page load, fade-out on hover.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.blocky_text {<!--  w  w  w. j  av  a2  s  .co m-->
    background-color: #EEE;
    display: inline-block;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.blocky_text:hover {
    opacity: 0.5;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fade_item_1 {
    -webkit-animation: fadein 0.5s;
    -moz-animation: fadein 0.5s;
    -ms-animation: fadein 0.5s;
    -o-animation: fadein 0.5s;
    animation: fadein 0.5s;
}
.fade_item_2 {
    -webkit-animation: fadein 0.8s;
    -moz-animation: fadein 0.8s;
    -ms-animation: fadein 0.8s;
    -o-animation: fadein 0.8s;
    animation: fadein 0.8s;
}
.fade_item_3 {
    -webkit-animation: fadein 1.1s;
    -moz-animation: fadein 1.1s;
    -ms-animation: fadein 1.1s;
    -o-animation: fadein 1.1s;
    animation: fadein 1.1s;
}
.fade_item_4 {
    -webkit-animation: fadein 1.4s;
    -moz-animation: fadein 1.4s;
    -ms-animation: fadein 1.4s;
    -o-animation: fadein 1.4s;
    animation: fadein 1.4s;
}
</style>
</head>
<body>
  <p class="fade_item_1 blocky_text">An example.</p>
  <p class="fade_item_2 blocky_text">An example.</p>
  <p class="fade_item_3 blocky_text">An example.</p>
  <p class="fade_item_4 blocky_text">An example.</p>
</body>
</html>

The code above is rendered as follows: