http://codepen.io/janesmith/pen/dqweasd
Need some help with this issue. I am trying to have the div start with a scale of 0 and then scale in when clicked. However, my attempt was unsuccessful.
CSS
/* Styling for Content Area */
.content div {
width: 50%;
margin: 2em auto;
padding: 1em;
background: #333;
border: 1em solid #555;
color: #fff;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
}
/* Hide unselected targets */
.content div:not(:target) {
display: none;
}
/* Display selected target */
:target {
display: inherit;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
HTML
<article id="container">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#services">Services</a></li>
</ul>
<div class="content">
<div id="about">
Additional content here.
</div>
<div id="contact">
More content here.
</div>
<div id="services">
Even more content here.
</div>
</div>
</article>