Skip to content

Instantly share code, notes, and snippets.

@S3ak
Created April 11, 2014 08:27
Show Gist options
  • Save S3ak/10449846 to your computer and use it in GitHub Desktop.
Save S3ak/10449846 to your computer and use it in GitHub Desktop.
List of animatable css properties
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer
// Module buttons
// --------------------------------------------------
.btn--more {
@extend .btn;
@extend .btn-inverse;
@extend .btn-large;
}
<script>
// Btn Module
var btnText = 'Read More';
$(function() {
$(".btn--more").text(btnText);
if $(this).add('.btn--more--no-text') {
remove(btnText);
};
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment