diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc
index ff04a0435607..db4510d269a3 100644
--- a/docs/content/guide/animations.ngdoc
+++ b/docs/content/guide/animations.ngdoc
@@ -29,18 +29,17 @@ Below is a quick example of animations being enabled for `ngShow` and `ngHide`:
.sample-show-hide {
- padding:10px;
- border:1px solid black;
- background:white;
+ padding: 10px;
+ border: 1px solid black;
+ background: white;
}
.sample-show-hide {
- -webkit-transition:all linear 0.5s;
- transition:all linear 0.5s;
+ transition: all linear 0.5s;
}
.sample-show-hide.ng-hide {
- opacity:0;
+ opacity: 0;
}
@@ -80,11 +79,8 @@ occur when ngRepeat triggers them:
class
*/
.repeated-item.ng-enter, .repeated-item.ng-move {
- -webkit-transition:0.5s linear all;
- -moz-transition:0.5s linear all;
- -o-transition:0.5s linear all;
- transition:0.5s linear all;
- opacity:0;
+ transition: all 0.5s linear;
+ opacity: 0;
}
/*
@@ -95,7 +91,7 @@ occur when ngRepeat triggers them:
*/
.repeated-item.ng-enter.ng-enter-active,
.repeated-item.ng-move.ng-move-active {
- opacity:1;
+ opacity: 1;
}
/*
@@ -104,10 +100,7 @@ occur when ngRepeat triggers them:
that has the .repeated-item class
*/
.repeated-item.ng-leave {
- -webkit-animation:0.5s my_animation;
- -moz-animation:0.5s my_animation;
- -o-animation:0.5s my_animation;
- animation:0.5s my_animation;
+ animation: 0.5s my_animation;
}
@keyframes my_animation {
@@ -115,24 +108,6 @@ occur when ngRepeat triggers them:
to { opacity:0; }
}
-/*
- Unfortunately each browser vendor requires
- its own definition of keyframe animation code...
-*/
-@-webkit-keyframes my_animation {
- from { opacity:1; }
- to { opacity:0; }
-}
-
-@-moz-keyframes my_animation {
- from { opacity:1; }
- to { opacity:0; }
-}
-
-@-o-keyframes my_animation {
- from { opacity:1; }
- to { opacity:0; }
-}
```
The same approach to animation can be used using JavaScript code (**jQuery is used within to perform animations**):
@@ -217,10 +192,7 @@ The example below shows how to perform animations during class changes:
.css-class-add, .css-class-remove {
- -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
- -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
- -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
- transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+ transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.css-class,
@@ -231,7 +203,7 @@ The example below shows how to perform animations during class changes:
.css-class-remove.css-class-remove-active {
font-size:1.0em;
- color:black;
+ color: black;
}
@@ -317,8 +289,8 @@ app.config(function($animateProvider) {
```css
/* prefixed with animate- */
.animate-fade-add.animate-fade-add-active {
- transition:1s linear all;
- opacity:0;
+ transition: all 1s linear;
+ opacity: 0;
}
```