diff --git a/demo/locked.html b/demo/locked.html
index 92cb4d033..641d27ef6 100644
--- a/demo/locked.html
+++ b/demo/locked.html
@@ -22,7 +22,7 @@ <h1>Locked demo</h1>
   </div>
 
   <script type="text/javascript">
-    let grid = GridStack.init({float: true});
+    let grid = GridStack.init({float: true, animate :true,});
 
     grid.on('added removed change', function(e, items) {
       let str = '';
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 51e171d51..5ab8b0bad 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -1072,13 +1072,12 @@ export class GridStack {
 
   /** @internal */
   private _initStyles(): GridStack {
-    if (this._stylesId) {
-      Utils.removeStylesheet(this._stylesId);
+    if (!this._stylesId) {
+      this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
+      // insert style to parent (instead of 'head' by default) to support WebComponent
+      let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
+      this._styles = Utils.createStylesheet(this._stylesId, styleLocation);
     }
-    this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
-    // insert style to parent (instead of 'head' by default) to support WebComponent
-    let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
-    this._styles = Utils.createStylesheet(this._stylesId, styleLocation);
     if (this._styles !== null) {
       this._styles._max = 0;
     }
diff --git a/src/utils.ts b/src/utils.ts
index 6910cf402..8c9e18ef1 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -106,13 +106,37 @@ export class Utils {
     if (!el || !el.parentNode) return;
     el.parentNode.removeChild(el);
   }
+  static getAllSelectors(sheet: CSSStyleSheet) { 
+    var ret = [];
+    var rules = sheet.cssRules;
+    for(var i = 0; i < rules.length; i++) {
+      var rule = rules[i];
+        var index = rule.cssText.indexOf(" {");
+        if(index >0){
+          var sel = rule.cssText.substr(0,index);
+          ret.push(sel);
+        }
+    }
+    return ret;
+}
 
+static hasCSSRule(sheet: CSSStyleSheet, selector: string) { 
+    var selectors = Utils.getAllSelectors(sheet);
+    for(var i = 0; i < selectors.length; i++) {
+      if(selectors[i] == selector){
+        return true;
+      }
+    }
+    return false;
+}
   /** inserts a CSS rule */
   static addCSSRule(sheet: CSSStyleSheet, selector: string, rules: string) {
-    if (typeof sheet.addRule === 'function') {
-      sheet.addRule(selector, rules);
-    } else if (typeof sheet.insertRule === 'function') {
-      sheet.insertRule(`${selector}{${rules}}`);
+    if(!Utils.hasCSSRule(sheet, selector)){
+      if (typeof sheet.addRule === 'function') {
+        sheet.addRule(selector, rules);
+      } else if (typeof sheet.insertRule === 'function') {
+        sheet.insertRule(`${selector}{${rules}}`);
+      }
     }
   }