Browse Source

add `-ms-transition` CSS

pull/150/merge
David DeSandro 13 years ago
parent
commit
d95c3ea736
  1. 4
      _posts/docs/2010-12-01-introduction.mdown
  2. 1
      _posts/docs/2010-12-03-options.mdown
  3. 3
      _posts/docs/2010-12-09-animating.mdown
  4. 2
      _posts/docs/2010-12-10-adding-items.mdown
  5. 1
      _posts/docs/2011-12-11-help.mdown
  6. 8
      _posts/tests/2011-03-27-flash.html
  7. 2
      _posts/tests/2011-05-13-jquery-animation.html
  8. 1
      _posts/tests/2011-08-19-right-to-left.html
  9. 5
      css/style.css

4
_posts/docs/2010-12-01-introduction.mdown

@ -104,6 +104,7 @@ Add these styles to your CSS for [filtering](filtering.html), [animation](animat
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
@ -111,6 +112,7 @@ Add these styles to your CSS for [filtering](filtering.html), [animation](animat
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
@ -118,6 +120,7 @@ Add these styles to your CSS for [filtering](filtering.html), [animation](animat
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -moz-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
@ -129,6 +132,7 @@ Add these styles to your CSS for [filtering](filtering.html), [animation](animat
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}

1
_posts/docs/2010-12-03-options.mdown

@ -301,6 +301,7 @@ If you do disable transforms, but still want to use [CSS transitions](animating.
.isotope .isotope-item {
-webkit-transition-property: top, left, opacity;
-moz-transition-property: top, left, opacity;
-ms-transition-property: top, left, opacity;
-o-transition-property: top, left, opacity;
transition-property: top, left, opacity;
}

3
_posts/docs/2010-12-09-animating.mdown

@ -32,6 +32,7 @@ To enable animation with CSS transitions, you'll need the following code in your
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
@ -39,6 +40,7 @@ To enable animation with CSS transitions, you'll need the following code in your
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
@ -46,6 +48,7 @@ To enable animation with CSS transitions, you'll need the following code in your
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}

2
_posts/docs/2010-12-10-adding-items.mdown

@ -71,6 +71,8 @@ You'll need these styles in your CSS for the reveal animation when adding items.
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}

1
_posts/docs/2011-12-11-help.mdown

@ -208,6 +208,7 @@ $('#container').isotope({
.isotope .isotope-item {
-webkit-transition-property: right, top, -webkit-transform, opacity;
-moz-transition-property: right, top, -moz-transform, opacity;
-ms-transition-property: right, top, -ms-transform, opacity;
-o-transition-property: right, top, -o-transform, opacity;
transition-property: right, top, transform, opacity;
}

8
_posts/tests/2011-03-27-flash.html

@ -11,14 +11,6 @@ category: tests
float: left;
background: #333;
}
.isotope .isotope-item {
-webkit-transition-property: top, left, opacity;
-moz-transition-property: top, left, opacity;
transition-property: top, left, opacity;
}
</style>
<section id="copy">

2
_posts/tests/2011-05-13-jquery-animation.html

@ -9,6 +9,8 @@ category: tests
.isotope .isotope-item {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
</style>

1
_posts/tests/2011-08-19-right-to-left.html

@ -13,6 +13,7 @@ body_class: demos
.isotope .isotope-item {
-webkit-transition-property: right, top, -webkit-transform, opacity;
-moz-transition-property: right, top, -moz-transform, opacity;
-ms-transition-property: right, top, -ms-transform, opacity;
-o-transition-property: right, top, -o-transform, opacity;
transition-property: right, top, transform, opacity;
}

5
css/style.css

@ -17,6 +17,7 @@
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
@ -24,6 +25,7 @@
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
@ -31,6 +33,7 @@
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
@ -42,6 +45,7 @@
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
@ -54,6 +58,7 @@
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}

Loading…
Cancel
Save