From d95c3ea736ff576289b6d27cf9001d8136ac6a18 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 2 Mar 2012 07:54:59 -0500 Subject: [PATCH] add `-ms-transition` CSS --- _posts/docs/2010-12-01-introduction.mdown | 4 ++++ _posts/docs/2010-12-03-options.mdown | 1 + _posts/docs/2010-12-09-animating.mdown | 3 +++ _posts/docs/2010-12-10-adding-items.mdown | 2 ++ _posts/docs/2011-12-11-help.mdown | 1 + _posts/tests/2011-03-27-flash.html | 8 -------- _posts/tests/2011-05-13-jquery-animation.html | 2 ++ _posts/tests/2011-08-19-right-to-left.html | 1 + css/style.css | 5 +++++ 9 files changed, 19 insertions(+), 8 deletions(-) diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown index ce59861..443a516 100644 --- a/_posts/docs/2010-12-01-introduction.mdown +++ b/_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; } diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index b153259..760234f 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_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; } diff --git a/_posts/docs/2010-12-09-animating.mdown b/_posts/docs/2010-12-09-animating.mdown index 5adec9e..027cf64 100644 --- a/_posts/docs/2010-12-09-animating.mdown +++ b/_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; } diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown index daecfa5..f74af8f 100644 --- a/_posts/docs/2010-12-10-adding-items.mdown +++ b/_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; } diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index ccc3224..3b6c8e7 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_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; } diff --git a/_posts/tests/2011-03-27-flash.html b/_posts/tests/2011-03-27-flash.html index 27fa010..446ecd0 100644 --- a/_posts/tests/2011-03-27-flash.html +++ b/_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; - } - -
diff --git a/_posts/tests/2011-05-13-jquery-animation.html b/_posts/tests/2011-05-13-jquery-animation.html index d900df7..3df3be8 100644 --- a/_posts/tests/2011-05-13-jquery-animation.html +++ b/_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; } diff --git a/_posts/tests/2011-08-19-right-to-left.html b/_posts/tests/2011-08-19-right-to-left.html index aebcd8e..90fe56a 100644 --- a/_posts/tests/2011-08-19-right-to-left.html +++ b/_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; } diff --git a/css/style.css b/css/style.css index 6a0a37c..7d5f0d5 100644 --- a/css/style.css +++ b/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; }