Question

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.

Answer 1

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

<a href="#box">Box</a><br /><a href="#boxtwo">Box two</a>
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>

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