NEWS
Loading...
  • Posted by : Johanes Djogan 30 Mar 2012

    Animasi Text dengan CSS3

    Entah kenapa akhir" ini lagi seneng"a main animasi,mungkin lagi bosen buat template kali ya?wkwkwk,padahal dari dulu paling males pakai keyframe karena agak berat,apalagi kalau di browser mozilla.ggrrrr malesin bgt deh=___=".saya buat beberapa experimen coba" dan hasil'a ada yg seperti hedaer saya,dan efek menarik lainya.tapi yang seperti di header saya tidak bisa dishare,karena udah nyatu ama header blog saya,mana yg dicopas jg udah lupa,n ribet==v,tapi contoh" dibawah ini tidak kalah menarik juga loh.daripada css HTMLa dibuang sayang,saya share aja deh.beberapa animasi diantara'a,mungkin cenderung lebih bagus di browser google chrome daripada mozilla firefox.meskipun udah diupdate browser mozilla'a ke yang paling baru,tp tetap aja masih menang google chrome kalau soal CSS3.

    nah,langsung aja saya dah sediain demo + CSS + HTMLnya.masih ada yang gatau css sama html'a mau ditaruh dimana?ckckck=="

    #Indonesian ._.

    Htmlnya bisa di masukan di layout blog kamu,add a gadget=>html/javkascript,lalu copas dan simpan.
    atau juga dimanapun yang kamu mau.

    <body> isi html </body>

    css/a diatas /b:skin

    do you know what I mean?







    1. Animasi dengan keyframe CSS3



    Sliding text background color


    HTML
    Ganti tanda pagar dengan URL link kamu

    <div class="menuku">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About me</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Download</a></li>
    </ul>
    </div>

    CSS
    .menuku {background:#000;width:auto;margin: 5px;}

    .menuku ul {
    padding:10px;
    font-family:"helvetica neue", helvetica, arial, sans-serif;
    font-weight:700;
    line-height:1.8;
    color:#fff;
    padding-left:5px;
    text-shadow: 0 1px 1px transparent;
    float:left;}

    .menuku ul li {
    clear:left;
    font-size:.9em;
    background:-webkit-linear-gradient(0, #3FB1E7 50%, #fff 50%);
    float:left;
    cursor:default;
    background-position:100% 0;
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-transition:background-position .4s cubic-bezier(0,0,.5,1);
    -moz-background-clip:text;
    -moz-text-fill-color:transparent;
    -moz-transition:background-position .4s cubic-bezier(0,0,.5,1);}

    .menuku ul li:hover {
    background-position:0 0;}




    Animated text background gambar

    Johanes

    HTML
    <div class="textanimasi1">
    Johanes</div>

    CSS
    @-webkit-keyframes slide {
    0% { background-position:0 0; opacity:0; }
    2% { background-position:2% 2%; opacity:1; }
    99% { background-position:99% 99%; }
    100% { background-position:100% 100%; opacity:0; }
    }

    .textanimasi1 {
    text-align:center;
    letter-spacing:-.08em;
    font:700 9.4em helvetica, sans-serif;
    background:url(http://4.bp.blogspot.com/-yMiGIoPKErk/T3R_vkJj-AI/AAAAAAAABdc/UCVf-ozjMHw/s1600/bg.jpg);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-animation:slide 60s linear infinite;
    -moz-background-clip:text;
    -moz-text-fill-color:transparent;
    -moz-animation:slide 60s linear infinite;
    text-shadow: 0 1px 1px transparent;
    }




    Animated text background gradient

    Johanes

    HTML

    <div class="textanimasi2">
    Johanes</div>

    CSS

    .textanimasi2{

    .textanimasi2{
    text-align:center;
    letter-spacing:-.08em;
    background: -webkit-gradient(linear,left top,right bottom,from(#E51D66),to(#705170));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation:slide1 5s linear infinite;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -moz-animation:slide1 5s linear infinite;
    background: -moz-gradient(linear,left top,right bottom,from(#E51D66),to(#705170));
    font:700 9.4em helvetica, sans-serif;
    text-shadow: 0 1px 1px transparent;}



    @-webkit-keyframes slide1 {
    0% { -webkit-transform: rotateZ(0); }
    1% { -webkit-transform: rotateZ(30deg); }
    3% { -webkit-transform: rotateZ(-28deg); }
    5% { -webkit-transform: rotateZ(34deg); }
    7% { -webkit-transform: rotateZ(-32deg); }
    9% { -webkit-transform: rotateZ(30deg); }
    11% { -webkit-transform: rotateZ(-28deg); }
    13% { -webkit-transform: rotateZ(26deg); }
    15% { -webkit-transform: rotateZ(-24deg); }
    17% { -webkit-transform: rotateZ(22deg); }
    19% { -webkit-transform: rotateZ(-20deg); }
    21% { -webkit-transform: rotateZ(18deg); }
    23% { -webkit-transform: rotateZ(-16deg); }
    25% { -webkit-transform: rotateZ(14deg); }
    27% { -webkit-transform: rotateZ(-12deg); }
    29% { -webkit-transform: rotateZ(10deg); }
    31% { -webkit-transform: rotateZ(-8deg); }
    33% { -webkit-transform: rotateZ(6deg); }
    35% { -webkit-transform: rotateZ(-4deg); }
    37% { -webkit-transform: rotateZ(2deg); }
    39% { -webkit-transform: rotateZ(-1deg); }
    41% { -webkit-transform: rotateZ(1deg); }
    43% { -webkit-transform: rotateZ(0); }
    100% { -webkit-transform: rotateZ(0); }
    }

    @-moz-keyframes slide1 {
    0% { -moz-transform: rotate(0); }
    1% { -moz-transform: rotate(30deg); }
    3% { -moz-transform: rotate(-28deg); }
    5% { -moz-transform: rotate(34deg); }
    7% { -moz-transform: rotate(-32deg); }
    9% { -moz-transform: rotate(30deg); }
    11% { -moz-transform: rotate(-28deg); }
    13% { -moz-transform: rotate(26deg); }
    15% { -moz-transform: rotate(-24deg); }
    17% { -moz-transform: rotate(22deg); }
    19% { -moz-transform: rotate(-20deg); }
    21% { -moz-transform: rotate(18deg); }
    23% { -moz-transform: rotate(-16deg); }
    25% { -moz-transform: rotate(14deg); }
    27% { -moz-transform: rotate(-12deg); }
    29% { -moz-transform: rotate(10deg); }
    31% { -moz-transform: rotate(-8deg); }
    33% { -moz-transform: rotate(6deg); }
    35% { -moz-transform: rotate(-4deg); }
    37% { -moz-transform: rotate(2deg); }
    39% { -moz-transform: rotate(-1deg); }
    41% { -moz-transform: rotate(1deg); }
    43% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(0); }
    }




    Johanes




    HTML
    <div class="textanimasi3">Johanes</div>




    CSS

    .textanimasi3{
    text-align:center;
    letter-spacing:-.08em;
    color:#E51D66;
    font:700 9.4em helvetica, sans-serif;
    text-shadow: 0px 0px 0px #ddd, 0x 0px 0px #ddd;
    -webkit-animation:text1 10s linear infinite;
    -moz-animation:text1 10s linear infinite;
    height: 100px;
    }


    @-webkit-keyframes text1 {
    0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
    25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
    50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
    75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
    100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
    }


    @-moz-keyframes text1 {
    0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
    25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
    50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
    75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
    100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
    }




    Johanes
    Johanes



    HTML
    <div class="textwrapper">
    <div class="textanimasi4">Johanes</div>
    <div class="textanimasi5">Johanes</div>
    </div>

    CSS

    .textanimasi4{
    text-align:center;
    letter-spacing:-.08em;
    color: rgba(255, 0, 0, 0.3 );
    font:700 9.4em helvetica, sans-serif;
    -webkit-animation:text4 3s linear infinite;
    -moz-animation:text4 3s linear infinite;
    height: 100px;top:0px;position:absolute;
    text-shadow: 0 1px 1px transparent;
    }

    .textanimasi5{
    text-align:center;
    letter-spacing:-.08em;
    color: rgba(0, 0, 255, 0.3 );
    font:700 9.4em helvetica, sans-serif;
    -webkit-animation:text5 3s linear infinite;
    -moz-animation:text5 3s linear infinite;
    height: 100px;top:0px;position:absolute;
    text-shadow: 0 1px 1px transparent;
    }

    .textwrapper{position:relative;height: 100px;}



    @-webkit-keyframes text4 {
    0% {margin-left:5;}
    50% {margin-left:-10px;}
    100% {margin-left:5;}
    }
    @-webkit-keyframes text5 {
    0% {margin-left:-5;}
    50% {margin-left:10px;}
    100% {margin-left:-5;}
    }
    @-moz-keyframes text4 {
    0% {margin-left:5;}
    50% {margin-left:-10px;}
    100% {margin-left:5;}
    }
    @-moz-keyframes text5 {
    0% {margin-left:-5;}
    50% {margin-left:10px;}
    100% {margin-left:-5;}
    }




    Johanes



    HTML
    <div class="textanimasi6">Johanes</div>


    CSS
    .textanimasi6{
    text-align:center;
    letter-spacing:-.08em;
    color: rgba(0, 0, 255, 0.3 );
    font:700 9.4em helvetica, sans-serif;
    -webkit-animation:text6 10s linear infinite;
    height: 100px;
    text-shadow: 0 1px 1px transparent;
    }

    @-webkit-keyframes text6 {
    0% {color:#74015A;}
    25% {color:#FF005E;}
    50% {color:#FC537D;}
    75% {color:#FBB185;}
    90% {color:#FDF9DB;}
    100% {color:#74015A;}
    }

    @-moz-keyframes text6 {
    0% {color:#74015A;}
    25% {color:#FF005E;}
    50% {color:#FC537D;}
    75% {color:#FBB185;}
    90% {color:#FDF9DB;}
    100% {color:#74015A;}
    }





    Johanes
    |
    Scaning...


    HTML
    <div class="textwrapper1">
    <div class="textanimasi7">Johanes</div>
    <div class="textanimasi8">|</div>
    <div class="textanimasi9">Scaning...</div>
    </div>

    CSS

    .textanimasi7, .textanimasi8{
    text-align:center;
    letter-spacing:-.08em;
    color: rgba(0, 0, 255, 0.3 );
    font:700 9.4em helvetica, sans-serif;
    height: 100px;top:0px;position:absolute;
    text-shadow: 0 1px 1px transparent;
    }
    .textanimasi8 {
    -webkit-animation:text8 3s linear infinite;
    -moz-animation:text8 3s linear infinite;}

    .textwrapper1{position:relative;height: 100px;}

    @-webkit-keyframes text8 {
    0% {margin-left:0px;}
    50% {margin-left:530px;}
    100% {margin-left:0px;}
    }
    @-moz-keyframes text8 {
    0% {margin-left:0px;}
    50% {margin-left:530px;}
    100% {margin-left:0px;}
    }

    .textanimasi9 {
    text-align: center;
    letter-spacing: 15px;
    color: rgba(0, 255, 0, 0.5 );
    font: 700 20px helvetica, sans-serif;
    bottom: -20px;
    position: absolute;
    text-shadow: 0 1px 1px transparent;
    width: 100%;
    -webkit-animation:text9 2s linear infinite;
    -moz-animation:text9 2s linear infinite;
    }
    @-webkit-keyframes text9 {
    0% {color: rgba(0, 255, 0, 0 );}
    50% {color: rgba(0, 255, 0, 1 );}
    100% {color: rgba(0, 255, 0, 0 );}
    }





    Sekianlah contoh" experimen saya tentang css3 keyframe~
    Semoga bermanfaat :) Arigatou Gozaimasu~xD

    { 17 comments... read them below or Comment }

    1. Memang mantap css3 coba semua browser support css3 uuh pasti terasa lebih hidup dengna tambahan css3 di dalam blog

      BalasHapus
    2. saya pake templatenya bang johanes.. nih blog saya http://creator-hasbi.blogspot.com/

      BalasHapus
    3. Mantap.. keren banget efeknya nih.. Btw saya juga punya posting serupa tentang animaso css3 dasar.. Moga aja bisa jadi tambahan buat posting ini dan bermanfaat :D

      http://www.syakirurohman.net/2014/12/mengenal-membuat-animasi-css3-di-websiteblog.html

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -