CSS3 animated target selector
http://codepen.io/mikethedj4/pen/cpbCk
I'm having a bit of trouble here. I want the div scale set to 0 and when
targeted to scale in, but when I tried it didn't work.
CSS
/* 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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
at feugiat odio. Proin sit amet eros ac diam tempus tempor.
Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id
metus adipiscing, id vehicula lacus fermentum. Proin mollis
facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus
non mollis nisl. Vestibulum ac mi quis metus mollis fermentum.
Donec pharetra consequat lacinia. Vestibulum porta tortor
purus, non fermentum turpis congue eget. Nulla varius augue
dolor, at pellentesque diam volutpat in. Vestibulum vitae
ligula eu eros tristique accumsan. Mauris sagittis iaculis
lorem id egestas. Suspendisse potenti. Cras faucibus dolor
turpis, ac ultrices dolor rhoncus a.
<p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis
risus a tempor semper. Nullam ac est nec dolor pellentesque
laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci
ipsum, pretium nec venenatis vel, lacinia et magna. Proin
dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit
amet nunc non nisl scelerisque dignissim a sed sapien.</p>
<p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros.
Suspendisse et diam sit amet quam pretium sollicitudin quis
nec enim. Nam fermentum risus dui, non volutpat dolor
pellentesque nec. Quisque interdum, neque eu feugiat
hendrerit, risus augue malesuada mauris, non vestibulum ante
erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel
dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend
iaculis. Nam adipiscing ipsum non justo ultrices, sit amet
vestibulum urna vehicula. Praesent porttitor neque et dictum
euismod. Aliquam erat volutpat. Nam adipiscing, neque ut
dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla
a enim.</p>
</div>
<div id="contact">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
purus leo, varius pellentesque vestibulum at, lobortis quis
est. Suspendisse mattis leo vel eros faucibus adipiscing.
Phasellus sed nisl eu lectus blandit dignissim vel id nibh.
Donec rutrum felis urna, sed elementum urna venenatis quis.
Praesent vel tortor sed felis sodales lobortis eget eget
nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor
lectus mattis. Aenean sed aliquet orci. Aliquam viverra
molestie ultrices.
<p>Nullam luctus imperdiet risus, vel convallis massa interdum
id. In ultricies pulvinar libero vitae sodales. Fusce eleifend
varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin,
metus et sagittis tincidunt, nisl felis ultricies ante, eu
dapibus massa odio sed nunc. Pellentesque semper eros dui, ac
mollis nunc dictum non. Quisque ultrices sapien at velit
pellentesque, at lacinia est commodo. Morbi commodo in neque
eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>
<p>Suspendisse sit amet lacus rutrum, faucibus augue vitae,
euismod nibh. Mauris aliquet nisi in nibh aliquam, et
ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu
ultricies odio. Etiam sodales vehicula dignissim. Vestibulum
libero tellus, luctus sed imperdiet quis, malesuada sed nunc.
In aliquet pellentesque erat pellentesque fringilla. Aenean
egestas ipsum eu nunc auctor, nec vestibulum est varius.
Integer convallis, orci sit amet sagittis hendrerit, purus
ligula dictum dolor, in lobortis ligula lacus pulvinar lorem.
Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem
odio, sollicitudin in fermentum egestas, gravida sed diam. Nam
condimentum augue ut ligula dapibus sodales. Donec blandit sem
non cursus aliquam.</p>
</div>
<div id="services">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus posuere porta suscipit. In ac purus quis lectus
blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet
ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut
quis turpis sit amet enim volutpat tincidunt. Vivamus vel
ornare neque. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Duis tincidunt mi
et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu
mollis elit, in tincidunt neque.
<p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim.
Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras
sit amet leo libero. Mauris ac dui lorem. Aenean velit risus,
ornare molestie neque ac, feugiat cursus tellus. Duis commodo
lacinia felis, vitae aliquam mauris consectetur cursus. Donec
arcu orci, sollicitudin eu lacus id, ultricies sollicitudin
ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit
tristique. Vestibulum aliquet bibendum arcu, in adipiscing
arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in
eros accumsan consequat in ac lacus. Maecenas pretium mattis
justo non euismod. Sed vel velit sollicitudin, posuere mi nec,
dictum lectus.</p>
<p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel
purus. Praesent velit purus, pharetra id eros id, viverra
ultricies velit. Phasellus sed lacinia neque, at dictum odio.
Mauris eget accumsan augue, ac imperdiet magna. Proin commodo
sem id purus vulputate mollis. Nunc a dignissim urna. Nam
facilisis, lectus sit amet blandit egestas, velit tortor
imperdiet massa, eu elementum lorem dolor nec diam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Phasellus
sit amet nisl turpis. Nulla vel nulla ut odio feugiat
ultrices. Ut id consequat sem.</p>
</div>
</div>
</article>
No comments:
Post a Comment