• 0

[HTML5 dev note 1] CSS3 animation withou js

Asked by normansu,

 Share

Question

Rookie

normansu

Posted
Posted

This is an sample of a pure CSS3 animation.

You don't need any js or jQuery coding.

i wanted to show you an existing sample but NEOWIN considered it as an ad.....

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> <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>[/CODE]

it looks like this

opening.jpg

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>
[/CODE]

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;

}
[/CODE]

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);

}[/CODE]

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>[/CODE]

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>[/CODE]

and add a button in the body

HTML Code:

[CODE]<input type="button" class="btn" value="show" onclick="show()"/>[/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:

[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>[/CODE]

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Grand Master

primexx

Posted
Posted

since you're holding this out to be a tutorial, i'm gonna be nit picky

1. you're ignoring all the other vendor extensions, not to mention the actual CSS3 properties

2. what's the point of the javascript snippet show()? didn't you say you *don't* need js?

Link to comment
Share on other sites
  • 0
Grand Master

XerXis

Posted
Posted

meh, when microsoft made their own extensions they were slammed for it. And now for some reason I should deviate from the standard because webkit has some esoteric CSS properties that are hell to implement on other browsers. No thank you

Link to comment
Share on other sites
  • 0
Rookie

normansu

Posted
  • Author
Posted

since you're holding this out to be a tutorial, i'm gonna be nit picky

1. you're ignoring all the other vendor extensions, not to mention the actual CSS3 properties

2. what's the point of the javascript snippet show()? didn't you say you *don't* need js?

1. you mean -webkit-, -o-. -moz- etc? yes i ignore the other two because i consider -webkite-translate different from translate.

2. this js is a trigger, has nothing to do with the slide animation itself. in other words, the movement's position, duration time, translate value has nothing to do with the js.

Thank you for being a bit nit picky, in my second Tutorial, i will ignore all the js. even the trigger~:)

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing