Welcome to iPadForums.net Guest - Click Here to Register

[CSS3 Tutorial]how to make webkit animation without js coding

This is a discussion on [CSS3 Tutorial]how to make webkit animation without js coding within the iPad Development forums, part of the iPad App Store category; We are from Annals.me and we are crazy about HTML5~ This is an sample of a pure CSS3 animation. You don't need any js or ...

iPadForums.net is the original Apple iPad Forum! Registered Users do not see these ads. Please Register - It's Free!
+ Reply to Thread
Results 1 to 2 of 2
  1. #1
    iPF Noob
    Member #
    192642
    Join Date
    Apr 2012
    Location
    london
    Posts
    5

    [CSS3 Tutorial]how to make webkit animation without js coding

    We are from Annals.me and we are crazy about HTML5~


    This is an sample of a pure CSS3 animation.
    You don't need any js or jQuery coding.




    first of all, let's have a quick look of why CSS3 animation doesn't need js anymore.
    In traditional html-web animation coding, animation was defined as an Element Movement, which means that the position of an element(padding/margin or absolute) should be changed to implement an animation.And of course, html/css doesn't support any dynamic coding, so you have to use js.


    but within the CSS3 -webkit-animation, the animation was redefined as the trasform/traslate from one key frame to another, so js can be ignored partially.


    OK, ready for the show.
    when you click learn more button on annals.me, the blue part is moving down.


    Before animation, we firstly build a simple layout as follow(original code on annals.me is more complicated.)
    HTML Code:
    HTML Code:
          body    {padding:0;}    .whole {    display:block;    width:100%;    height:auto;    padding:0 10%;        }        .opening {    diplay:block;    width:80%;    height:300px;    background:#006699;    }        .opening p{    padding:10%;    font-family:Arial;    color:white;    font-size:60px;    }     This is the hidden part
    it looks like this


    This animation is simple, we defined to key frames that are close and opening , and above is opening.


    then we write these into
    HTML Code:
    HTML Code:
    @-webkit-keyframes show {from {-webkit-transform: translateY(-300px);}to {-webkit-transform: translateY(0);}}


    we name this animation as show.Remember this name.
    FROM is the first key frame, which refers to close(beginning of the animation), translateY(-300px).
    Note the opening part is 300px height, so transitionY(-300px) will move this element out of screen.
    TO is the second key frame, which refers to opening(ending of the animation), and the original CSS style(.opening) above is the opening style, so translateY(0).


    After we finish defining the animation's key frames,we just simply put this name of the animation into the element's style by -webkit-animation.


    HTML Code:
    HTML Code:
    .opening {    diplay:block;    width:80%;    height:300px;    background:#006699;            -webkit-animation: show 1s 1 linear;        }
    show:the name of this animation
    1s:duration of this animation
    1:times of reaction
    linear:ways of moving


    now you can check the web. It is finished and without any js.
    Actually, you may want to trigger this animation by clicking the button.
    So we add some few js coding to make that happend.


    define a default close style. You just add translateY(-300px)
    HTML Code:
    HTML Code:
    .close{    diplay:block;    width:80%;    height:300px;    background:#006699;            -webkit-transform: translateY(-300px);
    }
    then, replace the div style from .opening to .close
    HTML Code:
    This is the hidden part


    check the web, hidden part should be really hidden.


    last, write a simple function and link this function to the btn
    HTML Code:
    HTML Code:
    ********>function show(){document.getElementById("moving").className = "opening";}
    and add a button in the body


    HTML Code:


    it is done.


    OK, if you want to close the part, it is very simple if you understand this tutorial.
    Try it yourself
    full code
    Code:
    HTML Code:
            body    {padding:0;}    .whole {    display:block;    width:100%;    height:auto;    padding:0 10%;        }
        .close {    diplay:block;    width:80%;    height:300px;    background:#006699;            -webkit-transform: translateY(-300px);        }        .opening {    diplay:block;    width:80%;    height:300px;    background:#006699;        -webkit-animation: show 1s 1 linear;        }        .opening p{    padding:10%;    font-family:Arial;    color:white;    font-size:60px;    }
        .btn{    display:block;    width:100px;    margin:auto;}            @-webkit-keyframes show {    from {-webkit-transform: translateY(-300px);}    to {-webkit-transform: translateY(0);}    }                ********>    function show(){    document.getElementById("moving").className = "opening";    }                            This is the hidden part
    Last edited by williamswan; 04-20-2012 at 02:45 AM.

  2. Ads


  3. #2
    iPF Noob
    Member #
    192642
    Join Date
    Apr 2012
    Location
    london
    Posts
    5
    pump


Home | Forum | Active Topics | What's New

Links

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Similar Threads

  1. HTML5 / CSS3 Magazine | Swipe
    By i0z in forum iPad Development
    Replies: 4
    Last Post: 03-20-2012, 06:36 PM
  2. Replies: 2
    Last Post: 08-02-2011, 03:26 PM
  3. iPad coding apps
    By Mavis in forum iPad Apps
    Replies: 1
    Last Post: 07-28-2011, 10:49 PM
  4. Free Gomoku Game for ipad - using HTML5/CSS3 & Javascript
    By namheo in forum iPad App Announcements
    Replies: 2
    Last Post: 11-24-2010, 05:25 PM
  5. Replies: 1
    Last Post: 09-14-2010, 06:19 AM

Search tags for this page

-webkit-animation reveal
,
animating with webkit tutorials
,
animation without codes
,
build webkit without javascript
,

css animation:reveal

,
on click show web-kit
,
style['webkitanimation']
,
tutoriales de css3 y javascript
,
use webkitanimation javascript 2012
,
webkit animation 2012
,
webkit animation code
,
webkit-animation simple
Click on a term to search for related topics.