Skip to content

Instantly share code, notes, and snippets.

@awakekat
Created July 5, 2014 01:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save awakekat/67ecfa953ce93cd7153b to your computer and use it in GitHub Desktop.
Save awakekat/67ecfa953ce93cd7153b to your computer and use it in GitHub Desktop.
Trigger CSS3 Transitions on Click using :target
// HTML MARKUP
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#four">Four</a>
<p id="one">Number One</p>
<p id="two">Number Two</p>
<p id="three">Number Three</p>
<p id="four">Number Four</p>
// CSS
p {
transition:all 1s ease;
/* Don't forget the vendor specific pre-fixes! */
}
p:target {
color:red;
font-size:40px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment