Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 vs. JavaScript

CSS3 vs. JavaScript

Problem

So I'm trying to create an animation on a webpage and am trying to figure out a way to do it using CSS3, but am quite confused as to how I can do it.

What I need to have happen is when users click on a link element I want a div to Expand and be populated with content specific to the link element clicked. For example, when a user clicks on a link titled "About", a div below the link element will expand and have some content appear. THEN, when they click another link, say "Contact", the content specific to "About" will disappear and content specific to "Contact" will appear as the div re-sizes to fit the new content.

I think I can do this pretty easily with Javascript, but can someone tell me if it might be easier to do/possible with CSS3?

Thanks all.

Problem courtesy of: Shawn Taylor

Solution

As already mentioned, JavaScript is your best friend for this. But since you asked if it would be possible with CSS3 I had to give it a try. Basically what I’ve done is I’ve used the target selector to trigger the animation. So when you click a link, a div expands with some content and if you click another link a new div, with some new content (positioned in the same place) expands, creating the illusion that it’s the same div expanding.

It’s not an optimal solution and I made this example really quick so it’s not working exactly as you wanted, but it gives you at least a picture on how it could be done with just CSS.

Hope that helps!

Here's a demo and here's the code from my example:

HTML

Box
Box two
Hello
Hello again,

CSS

#box, #boxtwo{
    position: absolute;
    top: 50px;
    left: 50px;    
    width: 0px;
    height: 0px;
    background-color: #e3e3e3;
    color: transparent;    
}

#box:target {
      -webkit-animation: expand 1.0s ease-in forwards;
}

#boxtwo:target {
      -webkit-animation: expand 1.0s ease-in forwards;
}

@-webkit-keyframes expand {
      0%   {width: 0px; height: 0px; color: transaprent;}
      50%  {width: 100px; height: 100px; color: transparent;}
      100% {width: 100px; height: 100px; color: #000000;}
}
Solution courtesy of: Christofer Vilander

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 vs. JavaScript

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×