[CSS3 Tutorial] How to write css animation without js

Discussion in 'Web Design and Development' started by williamswan, Apr 19, 2012.

  1. williamswan, Apr 19, 2012
    Last edited by a moderator: Apr 19, 2012

    williamswan macrumors newbie

    Joined:
    Apr 19, 2012
    #1
    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.

    sample here

    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:
    Code:
    <html> <head> <style>
    	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;
    	}
    </style> </head> <body> <div class="whole"> <div id="moving" class="opening"> <p>This is the hidden part</p> </div> </div> </body> </html>
    it looks like this
    [​IMG]

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

    then we write these into <style></style>
    HTML Code:
    Code:
    <style>
    @-webkit-keyframes show {
    from {-webkit-transform: translateY(-300px);}
    to {-webkit-transform: translateY(0);}
    }
    </style>
    
    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:
    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:
    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:
    Code:
    <body> <div class="whole"> <div id="moving" class="close"> <p>This is the hidden part</p> </div> </div> </body>
    check the web, hidden part should be really hidden.

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

    HTML Code:
    Code:
    <input type="button"  class="btn" value="show" onclick="show()"/>
    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:
    Code:
    <html>
    <head>
    	<style>
    	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);}
    	}
    	
    	</style>
    	
    	<script>
    	function show(){
    	document.getElementById("moving").className = "opening";
    	}
    	</script>
    </head>
    <body>
    	<div class="whole">
    		<div id="moving" class="close">
    			<p>This is the hidden part</p>
    		</div>
    	</div>
    	<input type="button"  class="btn" value="show" onclick="show()"/>
    </body>
    </html>
     
  2. Apple Key macrumors 6502a

    Apple Key

    Joined:
    Jan 4, 2012
    #2
    Interesting.

    It does flash for me though, and isn't as smooth as a jQuery one. Also, I notice that you use jQuery on your homepage. Why not just use CSS3 as you are recommending?
     
  3. williamswan thread starter macrumors newbie

    Joined:
    Apr 19, 2012
    #3
    yes we use jQuery for this preview site.
    and for the specific animation that i wrote as an sample, it is sure pure css3 animation. you can chech the animation.css on the site
     
  4. steveharrry macrumors newbie

    Joined:
    Mar 25, 2015
    Location:
    India
    #4
  5. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #5
    Sorry your site is currently unavailable.

    CSS3 / HTML5 transitions are pretty old hate these days. Not really sure what you are trying to show us ( again site is down ). If it is to simply move something from one place to another, there are much easier ways to accomplish this using only CSS3 / HTML5.

    I've been moving away from JS for about the last 5 years. I look for the HTML5 / CSS3 way of doing something first and only as a last resort, break out the JS.

    Good luck!

    Check out something like this:
    http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background
     
  6. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #6
    I saw this thread earlier and realised it was 3 years old.

    Also I find it funny the OP says no JS and then proceeds to explain that you need a JS function to add classes.
     
  7. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #7
    LOL... nice... I'm replying to ghosts. Note to self, check the datetime stamp.
     

Share This Page