Untitled

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #mytext{
            opacity:0;
            -webkit-transition: opacity 2s ease-in;
            -moz-transition: opacity 2s ease-in;
        }
        #mytext:hover{
            opacity:1;
        }

        #mytext2{
            opacity:0;
            -webkit-transition: opacity 2s ease-out;
            -moz-transition: opacity 2s ease-out;
        }
        #mytext2:hover{
            opacity:1;
        }

        #mytext3{
            opacity:0;
            -webkit-transition: opacity 2s ease;
            -moz-transition: opacity 2s ease;
        }
        #mytext3:hover{
            opacity:1;
        }

        #mytext4{
            opacity:0;
            -webkit-transition: opacity 2s ease-in-out;
            -moz-transition: opacity 2s ease-in-out;
        }
        #mytext4:hover{
            opacity:1;
        }

        #mytext5{
            opacity:0;
            -webkit-transition: opacity 2s linear;
            -moz-transition: opacity 2s linear;
        }
        #mytext5:hover{
            opacity:1;
        }

        #mytext6{
            opacity:0;
            -webkit-transition: opacity 2s cubic-bezier;
            -moz-transition: opacity 2s cubic-bezier;
        }
        #mytext6:hover{
            opacity:1;
        }
    </style>
</head>
<body>
    <div id="mytext">ease-in</div>
    <div id="mytext2">ease-out</div>
    <div id="mytext3">ease</div>
    <div id="mytext4">ease-in-out</div>
    <div id="mytext5">linear</div>
    <div id="mytext6">cubic-bezier</div>
</body>
</html>