Your two cents - CSS3 animation and Lazy loading

Placed in: Home

Useful

Reviews

Cialis Online

Your two cents - CSS3 animation and Lazy loading

Normally, I would ask questions/opinions from people through Twitter. But sometimes, you really need more space for the question/opinion than 140 characters. That's why I wanted to try a new concept on Marcofolio, called Your two cents. I'll lay down two statements (one cent each), and you're free to share your opinion with the world. Of course, I'll share my opinion too.

Keep in mind these are just opinions from me (and hopefully others in the comments) and not facts. If this concept gets loads of response, I'll continue thinking about other statements.

Here are the two statements on which I'm very curious about what you think about them:

“Animation properties, as added in CSS3, don't belong there.”

Webkit based browsers (Safari and Chrome) support CSS animation (transition and animation). It allows the designer to animate an element across a given timespan.

“Lazyloading images should be implemented on every website.”

Lazy loading delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.

So, what do you think about these two statements? Join the discussion!

My two cents

Animation properties, as added in CSS3, don't belong there.

I have to agree, using the transition CSS property, you can create pretty neat things. But, just like some others, I don't think it should be a CSS standard.

Let's break it down into the two pieces: transition and animation. Simply they mean the following: CSS Transitions are easy to use, while CSS Animations are made for programmers.

Behaviour

There always was a nice split between four different things:

Database for Content
HTML for Describing and Displaying content
CSS for Design
JavaScript for Functionality and Behavior

I personally think the CSS animation properties are behavioral things - it tells an element what to do, not how it should look like. Currently, animations are the domain of JavaScript and I think it should stay there.

Complexity

Check out the following CSS animation examples in order to make a transition and an animation.

 
selector {
   transition-property: margin-left, border-color, width, height;
   transition-duration: 0.5s;
   transition-timing-function: ease-out;
}

As you can see, the transition property selects which CSS properties should animate, how long it would take and which function to use. As you can imagine, this kind of CSS can make your code pretty complex. You'll need to think in your design stage on what will happen when an animation starts (which you can't stop BTW). And a timer element (duration) in CSS?

If you think the transition could be complex, check out the animation example:

 
selector:hover {
  animation: 'wobble' 2s;
}
@keyframes 'wobble' {
  0 {
    margin-left: 0;
  }
  40% {
    margin-left: 15px;
  }
  60% {
    margin-left: 75px;
  }
  100% {
      margin-left: 100px;
   }
}

This looks more like JavaScript than CSS to me. As you can see, you declare some sort of function call ('wobble') within your CSS. Although I like the idea of variables within CSS, but function... Not really.

"Lazyloading" images should be implemented on every website.

At first, lazyloading looks great: it only gets the image from the server at the time the user actually needs it. This will probably save your server loads of bandwidth, especially when you have long pages with loads of images (which not all people will view).

But only after seeing blogs like Francesco Mugnai and PSDTUTS+ having implemented the feature, it really started to annoy me a little bit.

Bad user experience

The solution could be very good for your server, but you'll remove some of the user experience. I normally would load a page (on a different tab), wait until it's fully (mostly) loaded and than start scrolling to view if I see something interesting. With the lazy image loading, I need to stop scrolling every time an image will appear. This makes multi-tasking pretty hard.

Another downside is, when using this technique, when you don't set the width and height properties of your image. When you scroll down really fast (for example, when you directly go to the comments section), the page would start loading all the images. Once you get to the comments section, it jumps down since another image has been loaded. This process will repeat itself until all images are loaded, which can be pretty frustrating and time-consuming.

What are your two cents? Tell us what you think!

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New

RSS

Angie Bowen

2009-12-02 02:25:55

I don't know enough about the animation property to comment but I will say that I hate lazyloading. Like you, I like to do other things while I'm waiting on a page to load. With lazyloading it takes twice as long to look through most pages, especially inspiration posts. So I'm really hoping it doesn't catch on.