bigsergey · May 13, 2016 12:40 · May 13, 2016 · May 13, 2016 · May 13, 2016 · May 13, 2016
diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -5,6 +5,30 @@ How it works:
 ![image](http://www.phpied.com/files/reflow/render.png 'Source: Rendering: repaint, reflow/relayout, restyle')
 
 *Source: [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)*
+
+Define css animation:
+```
+@keyframes myAnimation {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  30% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  60% {
+    transform: translate(100px, 0);
+  }
+  100% {
+    transform: translate(100px, 100px);
+  }
+}
+#box {
+   animation: myAnimation 2.75s;
+}
+```
+
 ## TIPS
 Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.
 

diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -3,6 +3,7 @@
 How it works:
 
 ![image](http://www.phpied.com/files/reflow/render.png 'Source: Rendering: repaint, reflow/relayout, restyle')
+
 *Source: [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)*
 ## TIPS
 Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.

diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -3,7 +3,7 @@
 How it works:
 
 ![image](http://www.phpied.com/files/reflow/render.png 'Source: Rendering: repaint, reflow/relayout, restyle')
-
+*Source: [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)*
 ## TIPS
 Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.
 

diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -2,7 +2,7 @@
 
 How it works:
 
-[image](http://www.phpied.com/files/reflow/render.png)
+![image](http://www.phpied.com/files/reflow/render.png 'Source: Rendering: repaint, reflow/relayout, restyle')
 
 ## TIPS
 Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.

diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -1,3 +1,9 @@
+# CSS Animations
+
+How it works:
+
+[image](http://www.phpied.com/files/reflow/render.png)
+
 ## TIPS
 Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.
 

diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -40,6 +40,9 @@ e.css('height', '100px');
 }
 ```
 
+**First read values then set new values.**
+
+
 ## Useful links:
 - [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
 - [Myth Busting: CSS Animations vs. JavaScript](https://css-tricks.com/myth-busting-css-animations-vs-javascript/)

diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -9,6 +9,38 @@ Be careful of animating properties that change the dimensions of or position of
 
 Instead use the transform property and the translate(), translateX(), and translateY() function.
 
+### Code examples
+Bad:
+```
+function test() {
+var e = $('#test');
+var width = e.css('width');
+if (width == '50px')
+e.css('width', '100px');
+ 
+var height = e.css('height');
+if (height == '50px')
+e.css('height', '100px');
+}
+```
+```e.css()``` fires ```window.getComputedStyle()``` and then *reflow*.
+
+Good:
+```
+function test() {
+var e = $('#test');
+var width = e.css('width'),
+height = e.css('height');
+ 
+if (width == '50px')
+e.css('width', '100px');
+ 
+if (height == '50px')
+e.css('height', '100px');
+}
+```
+
 ## Useful links:
 - [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
-- [Myth Busting: CSS Animations vs. JavaScript](https://css-tricks.com/myth-busting-css-animations-vs-javascript/)
+- [Myth Busting: CSS Animations vs. JavaScript](https://css-tricks.com/myth-busting-css-animations-vs-javascript/)
+- [REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?](http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/)
diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -1,4 +1,4 @@
-## TIP
+## TIPS
 Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.
 
 * top

diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -10,4 +10,5 @@ Be careful of animating properties that change the dimensions of or position of
 Instead use the transform property and the translate(), translateX(), and translateY() function.
 
 ## Useful links:
-- [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
+- [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
+- [Myth Busting: CSS Animations vs. JavaScript](https://css-tricks.com/myth-busting-css-animations-vs-javascript/)
diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -10,4 +10,4 @@ Be careful of animating properties that change the dimensions of or position of
 Instead use the transform property and the translate(), translateX(), and translateY() function.
 
 ## Useful links:
-- (Rendering: repaint, reflow/relayout, restyle)[http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/]
+- [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -7,4 +7,7 @@ Be careful of animating properties that change the dimensions of or position of
 * bottom
 * margin-*
 
-Instead use the transform property and the translate(), translateX(), and translateY() function
+Instead use the transform property and the translate(), translateX(), and translateY() function.
+
+## Useful links:
+- (Rendering: repaint, reflow/relayout, restyle)[http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/]
diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -1,9 +1,10 @@
 ## TIP
 Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.
 
-top
-left
-right
-bottom
-margin-*
+* top
+* left
+* right
+* bottom
+* margin-*
+
 Instead use the transform property and the translate(), translateX(), and translateY() function
diff --git a/CSSAnimations.md b/CSSAnimations.md
@@ -0,0 +1,9 @@
+## TIP
+Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.
+
+top
+left
+right
+bottom
+margin-*
+Instead use the transform property and the translate(), translateX(), and translateY() function
No results found