Sabtu, 09 Juli 2016

Animasi Fade dengan CSS

kali ini kita mempelajari pembuatan animasi dengna css





Salam senikoding

nah untuk membuat sebuah efek keren tidak harus menggunakan jquery ,cukup dengna penggunaan CSS3

sekarang kita akan membuat animasi FADE IN

langsung aja ni gan source nya

<!DOCTYPE html>      

<html>        
     <head>          
          <style type="text/css">
            @-webkit-keyframes fade
            {
              0%{
            opacity : 1.0;
            }
           
            50%
            {
              opacity : 0.0;
            }
           
            100%
            {
              opacity : 1.0;
            }
           
            }
                             
             @keyframes fade
            {
              0%{
            opacity : 1.0;
            }
           
            50%
            {
              opacity : 0.0;
            }
           
            100%
            {
              opacity : 1.0;
            }
           
            /*------------- background---------------*/
            }
            li
            {
               list-style:none
          }              
           
            .fade-background
            {
              background : #00b5ff;
              width : 100%;
              border : none;
              overflow : hidden;
              border-top : 1px solid #999999;
              border-bottom : 1px solid #999999;
              text-align : center;
            }
           
            /*------------panggil efek fadenya-----------*/
            .fade-button
            {
              color : rgb(255,255,255);
              font-size : 25px;
              padding : 15px 32px;
              text-shadow : 0px 0px 5px rgb(255,00,00);
              -webkit-animation : fade 4s linear 0s infinite alternate;
              animation : fade 4s linear 0s infinite alternate;
            }
           
            ul
            {
              list-style-type : none;
              margin : 0;
              padding : 0;
            }
           
            .a
            {
              display : block;
              width : 150px;
              background : #b5a545;
              padding : 15px 32px;
              color : black;
              overflow : hidden;
              -webkit-transition-duration : 0.9s;
              transition-duration : 0.9s;
            }
           
            .a:link
            {
              background : #ddffb5;
              font-weight : bolder;
              color : black;
              text-decoration : none;
            }
           
            .a:visited
            {
              background : #00ffb5;
              text-decoration : none;
              color : #0000ff;
            }
           
            .a:hover
            {
              background : #00b5ff;
              color : #000000;
              font-weight : bolder;
              -webkit-animation : fade 2s linear 0s 1 alternate;
              animation : fade 2s linear 0s 1 alternate;
            }
           
            .a:active
            {
              background : #009955;
              -webkit-animation : fade 2s linear 0s 1 alternate;
              animation : fade 2s linear 0s 1 alternate;
            }
           
            .demo
            {
              background : #009955;
              border-radius : 2px;
              text-align : center;
            }
          </style>          
     </head>        
     <body>          
          <div class="fade-background">
               <div class="fade-button">Fade efek!             </div>
          </div>
          <div class="demo">Tips untuk mencoba demo:           <br />
               Hover link dibawah ini ( untuk pengguna komputer )| Klik link dibawah ini (untuk pengguna ponsel )
          </div>
          <ul>
               <li><br /><a name="#wow"class="a">KLIK ATAU HOVER MENU DIBAWAH INI<br /></a><br />
               <li><br /><a href="#wow"class="a">Beranda<br /></a><br /></li><br /><br /><br />
               <li><br /><a href="#wow"class="a">Berita<br /></a><br /></li><br /><br /><br />
             
          </ul><div class="demo">link dengan efek fade in dan fade out</div>
     </body>          
</html>

sekian tutorial kita kali

0 komentar:

Posting Komentar