Skip to content

Instantly share code, notes, and snippets.

@brian-davis

brian-davis/circle-to-pointer-transform-list-style.markdown

Created June 7, 2014 02:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save brian-davis/e91005aa9c644e07179e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save brian-davis/e91005aa9c644e07179e to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Brian Davis.
Raw
index.html
<ul>
<li>One
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>Two
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>Three
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>Four
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>Five
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Raw
script.js
$(document).ready(function(){
$("li").click(function() {
$(this).find("div").slideToggle();
});
});
Raw
style.css
/*
Circle-to-pointer and pointer-to-circle animations, with vendor prefixes.
*/
@-o-keyframes circle-to-pointer {
0%{
border-radius: 50%;
-o-transform: rotate(45deg);
}
100%{
border-radius: 50% 0 50% 50%;
-o-transform: rotate(45deg);
}
}
@-o-keyframes pointer-to-circle {
0%{
border-radius: 50% 0 50% 50%;
-o-transform: rotate(45deg);
}
100%{
border-radius: 50%;
-o-transform: rotate(45deg);
}
}
@-ms-keyframes circle-to-pointer {
0%{
border-radius: 50%;
-ms-transform: rotate(45deg);
}
100%{
border-radius: 50% 0 50% 50%;
-ms-transform: rotate(45deg);
}
}
@-ms-keyframes pointer-to-circle {
0%{
border-radius: 50% 0 50% 50%;
-ms-transform: rotate(45deg);
}
100%{
border-radius: 50%;
-ms-transform: rotate(45deg);
}
}
@-moz-keyframes circle-to-pointer {
0%{
border-radius: 50%;
-moz-transform: rotate(45deg);
}
100%{
border-radius: 50% 0 50% 50%;
-moz-transform: rotate(45deg);
}
}
@-moz-keyframes pointer-to-circle {
0%{
border-radius: 50% 0 50% 50%;
-moz-transform: rotate(45deg);
}
100%{
border-radius: 50%;
-moz-transform: rotate(45deg);
}
}
@-webkit-keyframes circle-to-pointer {
0%{
border-radius: 50%;
-webkit-transform: rotate(45deg);
}
100%{
border-radius: 50% 0 50% 50%;
-webkit-transform: rotate(45deg);
}
}
@-webkit-keyframes pointer-to-circle {
0%{
border-radius: 50% 0 50% 50%;
-webkit-transform: rotate(45deg);
}
100%{
border-radius: 50%;
-webkit-transform: rotate(45deg);
}
}
@keyframes circle-to-pointer {
0%{
border-radius: 50%;
transform: rotate(45deg);
}
100%{
border-radius: 50% 0 50% 50%;
transform: rotate(45deg);
}
}
@keyframes pointer-to-circle {
0%{
border-radius: 50% 0 50% 50%;
transform: rotate(45deg);
}
100%{
border-radius: 50%;
transform: rotate(45deg);
}
}
/*
Main CSS.
*/
body {
background-color: #DDEBFF;
font-family: sans-serif;
color: #333;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
cursor: pointer;
line-height: 1.5em;
font-size: 200%;
}
li:before {
content: "";
display: inline-block;
height: 1em;
width: 1em;
border-radius: 50%;
background-color: #3A4C66;
margin-right: 0.5em;
position: relative;
top: 0.125em;
-webkit-animation: pointer-to-circle .5s cubic-bezier(0,.015,.295,1.225) forwards;
-moz-animation: pointer-to-circle .5s cubic-bezier(0,.015,.295,1.225) forwards;
-ms-animation: pointer-to-circle .5s cubic-bezier(0,.015,.295,1.225) forwards;
-o-animation: pointer-to-circle .5s cubic-bezier(0,.015,.295,1.225) forwards;
animation: pointer-to-circle .5s cubic-bezier(0,.015,.295,1.225) forwards;
}
li:hover:before {
-webkit-animation: circle-to-pointer .5s cubic-bezier(0,.015,.295,1.225) forwards;
-moz-animation: circle-to-pointer .5s cubic-bezier(0,.015,.295,1.225) forwards;
-ms-animation: circle-to-pointer .5s cubic-bezier(0,.015,.295,1.225) forwards;
-o-animation: circle-to-pointer .5s cubic-bezier(0,.015,.295,1.225) forwards;
animation: circle-to-pointer .5s cubic-bezier(0,.015,.295,1.225) forwards;
}
li div {
display: none;
font-size: 50%;
text-shadow: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment