• 0

[HTML5 dev note 1] CSS3 animation withou js


Question

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]

4 answers to this question

Recommended Posts

  • 0
  On 21/04/2012 at 07:59, primexx said:

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~:)

This topic is now closed to further replies.
  • Posts

    • From a quick Google it seems 6GHz is optional on 802.11be. Ubiquiti has one, Unifi U7 Lite.
    • Disagreed, I feel it’s going somewhere and his role served a purpose - and moreover with maybe what 10 mins of screen time - he had a bit of character development also.
    • This is the Superman film I had been waiting for. The tone was fine, yes a little more “fun” than previous outings but a lot of that came from supporting characters. Krypto was well handled, and somehow managed to not be an annoying distraction and actually a valid part of the story. Hoult was GREAT as Luthor. Genuinely so happy that this wasn’t crap. I personally enjoyed Superman Returns, despite its flaws (tried too much to hide behind the older movies, had no real fight to Superman). I enjoyed the Man Of Steel movies despite their flaws (totally that is NOT Superman). But this - this is the film I had wanted. In the UK we are far more reserved in cinemas than Americans. It’s rare that there is the whooping and hollering that we have seen from videos of US theatres, so when I say that the audience clapped at the end of this - it’s quite a big deal. As for all this “Superman has gone woke” BS - he is freaking Superman and if at any point in that movie you found yourself pooh-pooing his actions, you are just - you’re aligning your thinking with the problems and not the solutions. I adore how the movie addressed the modern world through thinly veiled allegory (Israel, online bots, perceptions of people, how they change on a dime) - that is maybe one of the greatest strengths of  comics, they rarely pull punches with that sort of thing, and look, THIS IS SUPERMAN, he’s meant to be the global boyscout and that is a strength and where he falls down sometimes, that’s just who he is and who he is meant to be. I also am glad there was no reference to the worldwide joke that is “Truth, Justice and the American way”. I can understand the comment suggesting this film was a little too “fun” or “whimsical”, but I’d urge a rewatch of the Donner Superman. It was very much a flawed masterpiece and its subsequent sequel had too many jokes that didn’t land. While there was a lot of James Gunn in this movie, I feel he pulled it back significantly, it wasn’t Guardians and moreover a lot of the fun came from supporting roles.
    • People do it everywhere. Should be legal to be allowed to bitch slap people who put their phone on speaker in public places
  • Recent Achievements

    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
    • Dedicated
      MacDaddyAz earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      504
    2. 2
      ATLien_0
      207
    3. 3
      Michael Scrip
      205
    4. 4
      Xenon
      141
    5. 5
      +FloatingFatMan
      115
  • Tell a friend

    Love Neowin? Tell a friend!