Animation

March Update – CSS Animation

Animation – A simulation of movement created by displaying a series of pictures, or frames. Cartoons on television is one example of animation. Animation on computers is one of the chief ingredients of multimedia presentations. There are many software applications that enable you to create animations that you can display on a computer monitor. In this article we provide you references for CSS3 Animation without using jQuery or JavaScript. We hope you find these resources and overview useful.

What is CSS Animation?

CSS animations make it possible to animate transitions from one CSS style configuration to another.

CSS animations are made up of two basic building blocks.

  1. Keyframes – define the stages and styles of the animation.
  2. Animation Properties – assign the @keyframes to a specific CSS element and define how it is animated.

The Article CSS Animation for Beginners covers following important elements in creating CSS Animation with code.

Advantages to CSS animations over traditional script-driven animation techniques

There are three key advantages :

  1. They’re easy to use for simple animations; you can create them without even having to know JavaScript.
  2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
  3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren’t currently visible.

The MDN web docs article, Using CSS animations, has very good examples and provides CSS code for animation. For those just getting started, we encourage you to read that article in depth.

Other Resources

  1. Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
  2. A cross-browser library of CSS animations. As easy to use as an easy thing.
  3. Creative blog’s 18 top CSS animation examples.
  4. The Top 9 Animation Libraries for UI Designers

Just for fun, we also recently encountered this CSS pun site. Very creative approach (and yes, CSS animations are employed in some of the examples). We thought those teaching aspiring web professionals might be able to use many of these examples.

We always look forward to your comments and feedback (whether you are a member or not).

If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. We even offer a specific class on CSS animation. As a member, your first class is free.

 

 

 

 

The post March Update – CSS Animation appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

A tale of a CSS3 Animation Demo

Once upon a time, there was this good hearted web developer, who was everyday worried about learning new cool things and trying new crazy stuff his browser could barely be able to do. Also, there were some giants, working hard to increase the power of the magic web, allowing all the peoples to live, code, learn and share freely.

Among those things, there was CSS3 with its new features! I heard about something called Mozilla Dev Derby, and by that month, the focused feature was exactly CSS3 animations! What an opportunity to learn cool and be part of something like that! It’s awesome that companies like Mozilla are working so hard to keep these subjects and contents available to us!

Two examples will be used here to both explain the technologies and tell the history. Felipe prepared a demo using HTML5 and CSS3 animations to do a Earth planet spinning, and, not aware of that, Deivid Marques had a similar idea.

Why a planet Earth?

Inspiration was the key. Since I was a child I have been fascinated with the Universe (both the micro, and macro ones) and the Earth, being what it is for us…such a good host! I decided to use it as inspiration!

Images

Obviously, images would be required. I tried to avoid images as much as possible, but I simply wouldn’t represent the Earth in a blurred image! Also, the moon, the stars in the background and the small sun are images.

What should be animating?

Before animating things around there, I mapped everything that could make sense to be moving, and how. First of all, the planet itself! The earth has to spin in one direction, while also bents to create the four seasons. Also, there is the day and night of the Earth due to its rotation.

The Moon runs around the globe, but once it is behind the Earth, it should get darker. Also, the Moon should come to the front of the planet, and then hide behind it. Also, a slow movement, added to the stars in the background, could be of use!

HTML Structure

I didn’t want to make it too complex, so I didn’t use pseudo elements. That forced me to have the HTML just a little bit bigger.

This is what is inside the Body tag:

<div id="sun">
</div>
<div id="atmosphere">
</div>
<div id='globe'>
</div>
<div id='moon'>
</div>
<div id="sunLight1">
</div>
<div id="sunLight2">
</div>
<div id="sunLight3">
</div>
<div id="sunLight4">
</div>
<div id="sunLight5">
</div>
<div id="sunLight6">
</div>

Visual effects

Well, you know that everything seems pretty from out there! So the visual effects should be cool too!

The globe

The globe is basically a rounded div, with a global map as its background. It is centered with an absolute position and sizes, and uses a box-shadow effect to represent the side of the planet where it’s night.

#globe
{
    background-image: url(images/globe-hearth.jpg) repeat-x;
    border: solid 1px #000;
    position:absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-left: -300px; /* aligning it to the center */
    margin-top: -300px;
    border-radius: 50%; /* making it round */
    z-index:0;
    box-shadow: inset 2px 2px 10px #000, inset -140px -70px 100px #000;
}

The atmosphere

The atmosphere is another round div with a box-shadow effect.

#atmosphere
{
    position:absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-left: -300px;
    margin-top: -300px;
    border-radius: 50%;
    opacity: 0.7;
    box-shadow: -6px -6px 20px #eef;
}

The Sun

The Sun, in this demo is just another div with an image as background, although, there is a tricky detail here! I wanted the Sun to be positioned right in the horizon of the globe, so, just centering it would not work! Also, I couldn’t know the resolution to fit it exactly there! But, I knew the size of the planet and I also knew it was centered!

Therefore, I just had to center it, and then adjust its position by changing its margin values.

#sun
{
    background-image: url(images/sun.png);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 47px;
    margin-left: -320px;
    margin-top: -110px;
}

The stars behind

The stars were simply a div with a repeatable background image.

The Moon

The Moon was quite more complex. It had to turn around the globe, so, I’d have to play with its z-index as well. Besides that, it was simply another round div.

Sun lights

Also, there are a few reflections of the light of the Sun. Those, are other round divs, absolutely positioned with different colours and opacity. Box-shadow could also be an optional nice touch! So I also used it.

Animation time

To animate the Earth, I created two animations using the keyframes CSS3 feature.

(Note: In these examples, I’m just showing the “-moz” definition of the animations, but you have to create them for each vendor if you want it to work in different browsers).

@-moz-keyframes dayByDay
{
    from{
            background-position: -1600px;
    }
    to{
            background-position: 0px;
    }
}

This way, the background of the globe would be passing, as pretending the globe was spinning. Also, I created the animation for the seasons:

@-moz-keyframes seasons
{
    from{
        -moz-transform: rotate(6deg);
    }
    to{
        -moz-transform: rotate(16deg);
    }
}

You know, the planet Earth is not fully straight to the 0 degrees. Now, I had to add those animations to the globe:

#globe{
    -moz-animation: dayByDay 24s linear 0s infinite, seasons 2688s linear alternate 0s infinite;
}

Animating the sky behind everything followed the very same technique as the dayByDay animation.

Animating the Moon was more of a challenge! To animate it, I had to change its size and position. Also making it darker or lighter and taking care of its z-index.

Below, is how I did that back then (on june 2011). Nowadays, I would try it with -moz-transform using the scale transform, instead of changing its width and height. Also, back then, I used negative and positive values for the z-index of the moon…instead, I could have added a z-index to the Earth, like 2, and use only positive values in the Moon’s z-index(1, and 3) to move it to the back or front of the planet. I didn’t want to change it here, because this is how it is running on the uploaded demo, in Mozilla Derby.

@-moz-keyframes moon
{
   0%{
       width: 30px;
       height: 31px;
       margin-left: -310px;
       margin-top: -40px;
       z-index:-1;
   }
   10%{
       margin-left: -450px;
       margin-top: -50px;
       width: 60px;
       height: 61px;
       z-index:1;
   }
   20%{
       margin-left: -500px;
       margin-top: -50px;
       width: 80px;
       height: 81px;
       z-index:1;
   }
   30%{
       margin-left: -450px;
       margin-top: -50px;
       width: 90px;
       height: 92px;
       z-index:1;
   }
   50%{
       margin-left: 0px;
       margin-top: -50px;
       width: 120px;
       height: 122px;
       z-index:1;
   }
   60%{
       margin-left: 300px;
       margin-top: -50px;
       width: 120px;
       height: 122px;
       z-index:1;
   }
   60%{
       margin-left: 410px;
       margin-top: -50px;
       width: 90px;
       height: 92px;
       z-index:1;
       box-shadow: inset 0px 0px 80px #000;
   }
   70%{
       margin-left: 460px;
       margin-top: -50px;
       width: 80px;
       height: 82px;
       z-index:1;
       box-shadow: inset 0px 0px 80px #000;
   }
   80%{
       margin-left: 420px;
       margin-top: -50px;
       width: 60px;
       height: 61px;
       z-index:-1;
       box-shadow: inset 0px 0px 80px #000;
   }
   90%{
       margin-left: 0px;
       margin-top: -50px;
       width: 30px;
       height: 31px;
       z-index:-1;
   }
   100%{
       width: 30px;
       height: 31px;
       margin-left: -310px;
       margin-top: -40px;
       z-index:-1;
   }
}

Mozilla Dev Derby

The above demo can be found as CSS3 up and running! in Mozilla’s Demo Studio.

Some time later, Deivid Marques did his Planeta Terra demo, using only one DIV. While studying CSS3, the idea of creating a planet Earth also came to his mind. He noticed the example in a flash tutorial and thought of creating that with CSS3 instead.

His planet Earth is made of a single div and uses the CSS to animate the background image. So, it is simpler to reproduce and understand.

The div has the following CSS applied to it:

.earth{
    background: url(images/terra.jpg) repeat-x 0 0;
    border: 1px solid rgba(26,18,101,0.3);
    border-radius: 225px;
    box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
    height: 450px;
    left: 50%;
    margin: -225px 0 0 -225px;
    position: absolute;
    top: 50%;
    width: 450px;
    animation: loop 80s linear infinite;
}

And here is his animation definition in CSS3:

@keyframes loop {
    0% { background-position: 0 0; }
    100%{ background-position: -900px 0;}
}

His demo was also posted to Mozilla Dev Derby once he was also inspired to tell the world about he had learnt while developing this demo! Planeta Terra is also available on GitHub.

This is how we both met and were invited to write this article.

Conclusion

It was great for me to learn new things, face new challenges, talk to a lot of people about their experiences with it, and …well, lots and lots of gains, no losses!

I hope it has motivated you somehow, to create your own demo, submit it…the least you get, is a lot of fun! 🙂

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)