diff --git a/.changeset/late-horses-join.md b/.changeset/late-horses-join.md
new file mode 100644
index 0000000000..2a258e9640
--- /dev/null
+++ b/.changeset/late-horses-join.md
@@ -0,0 +1,8 @@
+---
+'@emotion/styled': major
+'@emotion/cache': major
+'@emotion/react': major
+'@emotion/css': major
+---
+
+Removed auto-prefixing for widely available features.
diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index 8c0879fc93..02a2c44bfc 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -2,9 +2,6 @@
 
 exports[`should accept container option 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
 }
@@ -22,7 +19,7 @@ exports[`should accept container option 1`] = `
       data-s=""
     >
       
-      .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
+      .emotion-0{display:flex;color:blue;}
     </style>
   </div>
   <div>
@@ -45,7 +42,7 @@ exports[`should accept insertionPoint option 1`] = `
     data-s=""
   >
     
-    .test-insertion-point-83n355{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
+    .test-insertion-point-83n355{display:flex;color:blue;}
   </style>
   
     
diff --git a/packages/cache/src/prefixer.ts b/packages/cache/src/prefixer.ts
index 8a91467a36..654af77044 100644
--- a/packages/cache/src/prefixer.ts
+++ b/packages/cache/src/prefixer.ts
@@ -1,46 +1,16 @@
 /* eslint-disable no-fallthrough */
 /* eslint-disable eqeqeq */
-import {
-  charat,
-  combine,
-  copy,
-  DECLARATION,
-  hash,
-  indexof,
-  KEYFRAMES,
-  match,
-  MOZ,
-  MS,
-  replace,
-  RULESET,
-  serialize,
-  strlen,
-  WEBKIT,
-  Element,
-  Middleware
-} from 'stylis'
+import { DECLARATION, Element, hash, WEBKIT } from 'stylis'
 
-// this is a copy of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
+// this is a slice of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
+// this version only includes css properties that are not widely available according to https://web-platform-dx.github.io/web-features/
 
 function prefix(value: string, length: number): string {
   switch (hash(value, length)) {
     // color-adjust
     case 5103:
       return WEBKIT + 'print-' + value + value
-    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
-    case 5737:
-    case 4201:
-    case 3177:
-    case 3433:
-    case 1641:
-    case 4457:
-    case 2921:
-    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
-    case 5572:
-    case 6356:
-    case 5844:
-    case 3191:
-    case 6645:
+    // box-decoration-break
     case 3005:
     // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
     case 6391:
@@ -49,299 +19,18 @@ function prefix(value: string, length: number): string {
     case 6135:
     case 4599:
     case 4855:
-    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
-    case 4215:
-    case 6389:
-    case 5109:
-    case 5365:
-    case 5621:
-    case 3829:
-      return WEBKIT + value + value
-    // appearance, user-select, transform, hyphens, text-size-adjust
-    case 5349:
+    // user-select, hyphens, text-size-adjust
     case 4246:
-    case 4810:
     case 6968:
     case 2756:
-      return WEBKIT + value + MOZ + value + MS + value + value
-    // flex, flex-direction
-    case 6828:
-    case 4268:
-      return WEBKIT + value + MS + value + value
-    // order
-    case 6165:
-      return WEBKIT + value + MS + 'flex-' + value + value
-    // align-items
-    case 5187:
-      return (
-        WEBKIT +
-        value +
-        replace(
-          value,
-          /(\w+).+(:[^]+)/,
-          WEBKIT + 'box-$1$2' + MS + 'flex-$1$2'
-        ) +
-        value
-      )
-    // align-self
-    case 5443:
-      return (
-        WEBKIT +
-        value +
-        MS +
-        'flex-item-' +
-        replace(value, /flex-|-self/, '') +
-        value
-      )
-    // align-content
-    case 4675:
-      return (
-        WEBKIT +
-        value +
-        MS +
-        'flex-line-pack' +
-        replace(value, /align-content|flex-|-self/, '') +
-        value
-      )
-    // flex-shrink
-    case 5548:
-      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value
-    // flex-basis
-    case 5292:
-      return (
-        WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value
-      )
-    // flex-grow
-    case 6060:
-      return (
-        WEBKIT +
-        'box-' +
-        replace(value, '-grow', '') +
-        WEBKIT +
-        value +
-        MS +
-        replace(value, 'grow', 'positive') +
-        value
-      )
-    // transition
-    case 4554:
-      return (
-        WEBKIT +
-        replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') +
-        value
-      )
-    // cursor
-    case 6187:
-      return (
-        replace(
-          replace(
-            replace(value, /(zoom-|grab)/, WEBKIT + '$1'),
-            /(image-set)/,
-            WEBKIT + '$1'
-          ),
-          value,
-          ''
-        ) + value
-      )
-    // background, background-image
-    case 5495:
-    case 3959:
-      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
-    // justify-content
-    case 4968:
-      return (
-        replace(
-          replace(
-            value,
-            /(.+:)(flex-)?(.*)/,
-            WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'
-          ),
-          /s.+-b[^;]+/,
-          'justify'
-        ) +
-        WEBKIT +
-        value +
-        value
-      )
-    // (margin|padding)-inline-(start|end)
-    case 4095:
-    case 3583:
-    case 4068:
-    case 2532:
-      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
-    // (min|max)?(width|height|inline-size|block-size)
-    case 8116:
-    case 7059:
-    case 5753:
-    case 5535:
-    case 5445:
-    case 5701:
-    case 4933:
-    case 4677:
-    case 5533:
-    case 5789:
-    case 5021:
-    case 4765:
-      // stretch, max-content, min-content, fill-available
-      if (strlen(value) - 1 - length > 6)
-        switch (charat(value, length + 1)) {
-          // (m)ax-content, (m)in-content
-          case 109:
-            // -
-            if (charat(value, length + 4) !== 45) break
-          // (f)ill-available, (f)it-content
-          case 102:
-            return (
-              replace(
-                value,
-                /(.+:)(.+)-([^]+)/,
-                '$1' +
-                  WEBKIT +
-                  '$2-$3' +
-                  '$1' +
-                  MOZ +
-                  (charat(value, length + 3) == 108 ? '$3' : '$2-$3')
-              ) + value
-            )
-          // (s)tretch
-          case 115:
-            return ~indexof(value, 'stretch')
-              ? prefix(replace(value, 'stretch', 'fill-available'), length) +
-                  value
-              : value
-        }
-      break
-    // position: sticky
-    case 4949:
-      // (s)ticky?
-      if (charat(value, length + 1) !== 115) break
-    // display: (flex|inline-flex)
-    case 6444:
-      switch (
-        charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))
-      ) {
-        // stic(k)y
-        case 107:
-          return replace(value, ':', ':' + WEBKIT) + value
-        // (inline-)?fl(e)x
-        case 101:
-          return (
-            replace(
-              value,
-              /(.+:)([^;!]+)(;|!.+)?/,
-              '$1' +
-                WEBKIT +
-                (charat(value, 14) === 45 ? 'inline-' : '') +
-                'box$3' +
-                '$1' +
-                WEBKIT +
-                '$2$3' +
-                '$1' +
-                MS +
-                '$2box$3'
-            ) + value
-          )
-      }
-      break
-    // writing-mode
-    case 5936:
-      switch (charat(value, length + 11)) {
-        // vertical-l(r)
-        case 114:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'tb') +
-            value
-          )
-        // vertical-r(l)
-        case 108:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') +
-            value
-          )
-        // horizontal(-)tb
-        case 45:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'lr') +
-            value
-          )
-      }
-
-      return WEBKIT + value + MS + value + value
+      return WEBKIT + value + value
   }
 
   return value
 }
 
-export let prefixer = (
-  element: Element,
-  index: number,
-  children: Element[],
-  callback: Middleware
-) => {
-  if (element.length > -1)
-    if (!element.return)
-      switch (element.type) {
-        case DECLARATION:
-          element.return = prefix(element.value, element.length)
-          break
-        case KEYFRAMES:
-          return serialize(
-            [
-              copy(element, {
-                value: replace(element.value, '@', '@' + WEBKIT)
-              })
-            ],
-            callback
-          )
-        case RULESET:
-          if (element.length)
-            return combine(element.props as string[], function (value) {
-              switch (match(value, /(::plac\w+|:read-\w+)/)) {
-                // :read-(only|write)
-                case ':read-only':
-                case ':read-write':
-                  return serialize(
-                    [
-                      copy(element, {
-                        props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
-                      })
-                    ],
-                    callback
-                  )
-                // :placeholder
-                case '::placeholder':
-                  return serialize(
-                    [
-                      copy(element, {
-                        props: [
-                          replace(
-                            value,
-                            /:(plac\w+)/,
-                            ':' + WEBKIT + 'input-$1'
-                          )
-                        ]
-                      }),
-                      copy(element, {
-                        props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
-                      }),
-                      copy(element, {
-                        props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
-                      })
-                    ],
-                    callback
-                  )
-              }
-
-              return ''
-            })
-      }
+export let prefixer = (element: Element) => {
+  if (element.length > -1 && !element.return && element.type === DECLARATION) {
+    element.return = prefix(element.value, element.length)
+  }
 }
diff --git a/packages/css/test/__snapshots__/css.test.js.snap b/packages/css/test/__snapshots__/css.test.js.snap
index c4b2a1a926..aeb222378c 100644
--- a/packages/css/test/__snapshots__/css.test.js.snap
+++ b/packages/css/test/__snapshots__/css.test.js.snap
@@ -25,9 +25,6 @@ exports[`css array fallback 1`] = `
 
 exports[`css array with explicit false 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -38,9 +35,6 @@ exports[`css array with explicit false 1`] = `
 
 exports[`css array with explicit true 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -51,12 +45,7 @@ exports[`css array with explicit true 1`] = `
 
 exports[`css auto px 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   font-size: 10px;
   --custom: 5;
@@ -69,9 +58,6 @@ exports[`css auto px 1`] = `
 
 exports[`css boolean as value 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -82,9 +68,6 @@ exports[`css boolean as value 1`] = `
 
 exports[`css composition stuff 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -95,9 +78,6 @@ exports[`css composition stuff 1`] = `
 
 exports[`css composition stuff 2`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -108,15 +88,9 @@ exports[`css composition stuff 2`] = `
 
 exports[`css composition with objects 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -164,9 +138,6 @@ exports[`css css variables 1`] = `
 
 exports[`css explicit & 1`] = `
 .emotion-0.another-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -177,9 +148,6 @@ exports[`css explicit & 1`] = `
 
 exports[`css explicit & 2`] = `
 ".css-5v9d41-cls1.another-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }"
 `;
@@ -192,9 +160,6 @@ exports[`css explicit false 1`] = `
 
 exports[`css falsy property value in object 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -225,9 +190,6 @@ exports[`css float property 1`] = `
 
 exports[`css flushes correctly 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -255,7 +217,6 @@ exports[`css handles array of objects 1`] = `
 
 exports[`css handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -277,9 +238,6 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 exports[`css handles objects 1`] = `
 .emotion-0 {
   float: left;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
   font-size: 20px;
@@ -369,9 +327,6 @@ exports[`css nested 1`] = `
 }
 
 .emotion-0 .some-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -403,9 +358,6 @@ exports[`css nested array 1`] = `
   display: inline;
   display: inline-block;
   display: block;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   display: table;
   color: darkorchid;
@@ -447,9 +399,6 @@ exports[`css nested at rules 1`] = `
 
   @supports (display: flex) {
     .emotion-0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
       display: flex;
     }
   }
@@ -506,9 +455,6 @@ exports[`css random expression 1`] = `
 
 exports[`css random interpolation with undefined values 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -519,9 +465,6 @@ exports[`css random interpolation with undefined values 1`] = `
 
 exports[`css registered styles as nested selector value in object 1`] = `
 .emotion-0:hover {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   background-color: hotpink;
 }
@@ -549,13 +492,7 @@ exports[`css rule after media query 1`] = `
 
 exports[`css simple composition 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -570,9 +507,6 @@ exports[`css simple composition 1`] = `
 
 exports[`css weakmap 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -583,9 +517,6 @@ exports[`css weakmap 1`] = `
 
 exports[`css weakmap 2`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/css/test/__snapshots__/inject-global.test.js.snap b/packages/css/test/__snapshots__/inject-global.test.js.snap
index def7a1604e..9dda829049 100644
--- a/packages/css/test/__snapshots__/inject-global.test.js.snap
+++ b/packages/css/test/__snapshots__/inject-global.test.js.snap
@@ -21,9 +21,6 @@ exports[`injectGlobal interpolated value 1`] = `
 exports[`injectGlobal nested interpolated media query 1`] = `
 "@media (max-width: 600px) {
   body {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     display: flex;
   }
 }"
@@ -39,16 +36,10 @@ exports[`injectGlobal pseudo in @media 1`] = `
 
 exports[`injectGlobal random interpolation 1`] = `
 ".css-1002tid-cls {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
 body {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }"
 `;
diff --git a/packages/css/test/__snapshots__/keyframes.test.js.snap b/packages/css/test/__snapshots__/keyframes.test.js.snap
index 190c314456..684fc0c310 100644
--- a/packages/css/test/__snapshots__/keyframes.test.js.snap
+++ b/packages/css/test/__snapshots__/keyframes.test.js.snap
@@ -3,22 +3,15 @@
 exports[`keyframes keyframes with interpolation 1`] = `
 @keyframes animation-0 {
   from {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   to {
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 2s linear infinite;
   animation: animation-0 2s linear infinite;
 }
 
@@ -32,42 +25,26 @@ exports[`keyframes keyframes with interpolation 1`] = `
 exports[`keyframes renders 1`] = `
 @keyframes animation-0 {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    -webkit-transform: translate3d(0,0,0);
-    -moz-transform: translate3d(0,0,0);
-    -ms-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0,-4px,0);
-    -moz-transform: translate3d(0,-4px,0);
-    -ms-transform: translate3d(0,-4px,0);
     transform: translate3d(0,-4px,0);
   }
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 2s linear infinite;
   animation: animation-0 2s linear infinite;
 }
 
diff --git a/packages/css/test/no-babel/__snapshots__/index.test.js.snap b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
index ab9d62bb38..87f32bf7d4 100644
--- a/packages/css/test/no-babel/__snapshots__/index.test.js.snap
+++ b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
@@ -18,13 +18,7 @@ exports[`css component selectors without target 1`] = `"Component selectors can
 
 exports[`css composition 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -39,9 +33,6 @@ exports[`css composition 1`] = `
 
 exports[`css composition stuff 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -52,9 +43,6 @@ exports[`css composition stuff 1`] = `
 
 exports[`css composition stuff 2`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -65,15 +53,9 @@ exports[`css composition stuff 2`] = `
 
 exports[`css composition with objects 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -114,12 +96,7 @@ exports[`css function in expression 1`] = `
 exports[`css glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -134,9 +111,6 @@ exports[`css glamorous style api & composition 1`] = `
 exports[`css handles objects 1`] = `
 .emotion-0 {
   float: left;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
   font-size: 20px;
@@ -151,9 +125,6 @@ exports[`css handles objects 1`] = `
 
 exports[`css nested array 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -183,12 +154,7 @@ exports[`css null rule 1`] = `
 exports[`css object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/react/__tests__/__snapshots__/css.js.snap b/packages/react/__tests__/__snapshots__/css.js.snap
index 5d97fd568a..79d98b6eb2 100644
--- a/packages/react/__tests__/__snapshots__/css.js.snap
+++ b/packages/react/__tests__/__snapshots__/css.js.snap
@@ -178,9 +178,6 @@ exports[`string as css prop throws 1`] = `
 exports[`theming with the array css prop 1`] = `
 .emotion-0 {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -201,9 +198,6 @@ exports[`theming with the css prop 1`] = `
 
 exports[`thing 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/react/__tests__/__snapshots__/global.js.snap b/packages/react/__tests__/__snapshots__/global.js.snap
index 8f4a98b806..e804794eb3 100644
--- a/packages/react/__tests__/__snapshots__/global.js.snap
+++ b/packages/react/__tests__/__snapshots__/global.js.snap
@@ -9,13 +9,6 @@ exports[`basic 1`] = `
     
     .css-animation-ocj8pk{}
   </style>
-  <style
-    data-emotion="css"
-    data-s=""
-  >
-    
-    @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
-  </style>
   <style
     data-emotion="css"
     data-s=""
@@ -42,7 +35,7 @@ exports[`basic 1`] = `
     data-s=""
   >
     
-    h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
+    h1{animation:animation-ocj8pk 1s;}
   </style>
   <style
     data-emotion="css-global"
@@ -69,13 +62,6 @@ exports[`basic 3`] = `
     
     .css-animation-ocj8pk{}
   </style>
-  <style
-    data-emotion="css"
-    data-s=""
-  >
-    
-    @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
-  </style>
   <style
     data-emotion="css"
     data-s=""
diff --git a/packages/react/__tests__/__snapshots__/keyframes.js.snap b/packages/react/__tests__/__snapshots__/keyframes.js.snap
index 9e1bac3eee..0151219587 100644
--- a/packages/react/__tests__/__snapshots__/keyframes.js.snap
+++ b/packages/react/__tests__/__snapshots__/keyframes.js.snap
@@ -12,7 +12,6 @@ exports[`keyframes basic 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -25,8 +24,7 @@ exports[`keyframes basic 1`] = `
 
 exports[`keyframes basic 2`] = `
 [
-  ".css-1mzou9w{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1mzou9w{animation:animation-1bi8wtt;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -53,7 +51,6 @@ exports[`keyframes keyframes used in css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s animation-1;
   animation: animation-0 1s animation-1;
 }
 
@@ -66,10 +63,8 @@ exports[`keyframes keyframes used in css call 1`] = `
 
 exports[`keyframes keyframes used in css call 2`] = `
 [
-  ".css-9yzsha{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-9yzsha{animation:animation-1bi8wtt 1s animation-1ajb83a;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
-  "@-webkit-keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
   "@keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
 ]
 `;
@@ -96,7 +91,6 @@ exports[`keyframes multiple keyframes object 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s animation-1;
   animation: animation-0 1s animation-1;
 }
 
@@ -109,10 +103,8 @@ exports[`keyframes multiple keyframes object 1`] = `
 
 exports[`keyframes multiple keyframes object 2`] = `
 [
-  ".css-1jqzi3u{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
-  "@-webkit-keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
+  ".css-1jqzi3u{animation:animation-1bi8wtt 1s animation-1ajb83a;}",
   "@keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -129,7 +121,6 @@ exports[`keyframes object 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s;
   animation: animation-0 1s;
 }
 
@@ -142,8 +133,7 @@ exports[`keyframes object 1`] = `
 
 exports[`keyframes object 2`] = `
 [
-  ".css-d88cqt{-webkit-animation:animation-o4c3es 1s;animation:animation-o4c3es 1s;}",
-  "@-webkit-keyframes animation-o4c3es{from{color:green;}to{color:hotpink;}}",
+  ".css-d88cqt{animation:animation-o4c3es 1s;}",
   "@keyframes animation-o4c3es{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -160,9 +150,7 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -175,8 +163,7 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 
 exports[`keyframes object with animation and opaque keyframes as value 2`] = `
 [
-  ".css-g32qbw{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-g32qbw{animation:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -193,9 +180,7 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 }
 
 .emotion-0 {
-  -webkit-animation-name: animation-0;
   animation-name: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -208,8 +193,7 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 
 exports[`keyframes object with animationName and opaque keyframes as value 2`] = `
 [
-  ".css-wo7teo{-webkit-animation-name:animation-1bi8wtt;animation-name:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-wo7teo{animation-name:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -226,9 +210,7 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 }
 
 .emotion-0 {
-  -webkit-animation-name: animation-0;
   animation-name: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -241,8 +223,7 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 
 exports[`keyframes object with animationName and string keyframes as value 2`] = `
 [
-  ".css-wo7teo{-webkit-animation-name:animation-1bi8wtt;animation-name:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-wo7teo{animation-name:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -259,7 +240,6 @@ exports[`keyframes object with string keyframes 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s;
   animation: animation-0 1s;
 }
 
@@ -272,8 +252,7 @@ exports[`keyframes object with string keyframes 1`] = `
 
 exports[`keyframes object with string keyframes 2`] = `
 [
-  ".css-1wh2ide{-webkit-animation:animation-1bi8wtt 1s;animation:animation-1bi8wtt 1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1wh2ide{animation:animation-1bi8wtt 1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -290,7 +269,6 @@ exports[`keyframes without css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -303,8 +281,7 @@ exports[`keyframes without css call 1`] = `
 
 exports[`keyframes without css call 2`] = `
 [
-  ".css-1mzou9w{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1mzou9w{animation:animation-1bi8wtt;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
diff --git a/packages/react/__tests__/__snapshots__/server.js.snap b/packages/react/__tests__/__snapshots__/server.js.snap
index 3e4665ee44..9a1d90824e 100644
--- a/packages/react/__tests__/__snapshots__/server.js.snap
+++ b/packages/react/__tests__/__snapshots__/server.js.snap
@@ -29,13 +29,13 @@ exports[`ssr global 1`] = `
 
 exports[`ssr global with keyframes 1`] = `
 <style data-emotion="css-global eti4v9 animation-ocj8pk">
-  h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  h1{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 `;
 
 exports[`ssr keyframes 1`] = `
 <style data-emotion="css cijyg1 animation-1ch4i0o">
-  .css-cijyg1{-webkit-animation:1s animation-1ch4i0o;animation:1s animation-1ch4i0o;}@-webkit-keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
+  .css-cijyg1{animation:1s animation-1ch4i0o;}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
 </style>
 <div class="css-cijyg1">
 </div>
@@ -73,7 +73,7 @@ exports[`ssr only render a style once with the css prop 1`] = `
 
 exports[`ssr styled with keyframes 1`] = `
 <style data-emotion="css 1y9glrp animation-ocj8pk">
-  .css-1y9glrp{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  .css-1y9glrp{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 <div class="css-1y9glrp">
 </div>
@@ -114,16 +114,16 @@ exports[`ssr with old api global 1`] = `
 
 exports[`ssr with old api global with keyframes 1`] = `
 <style data-emotion="css eti4v9 animation-ocj8pk">
-  h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  h1{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 `;
 
 exports[`ssr with old api keyframes 1`] = `
 <style data-emotion="css animation-1ch4i0o">
-  @-webkit-keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
+  @keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
 </style>
 <style data-emotion="css cijyg1">
-  .css-cijyg1{-webkit-animation:1s animation-1ch4i0o;animation:1s animation-1ch4i0o;}
+  .css-cijyg1{animation:1s animation-1ch4i0o;}
 </style>
 <div class="css-cijyg1">
 </div>
@@ -161,10 +161,10 @@ exports[`ssr with old api only render a style once with the css prop 1`] = `
 
 exports[`ssr with old api styled with keyframes 1`] = `
 <style data-emotion="css animation-ocj8pk">
-  @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  @keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 <style data-emotion="css 1y9glrp">
-  .css-1y9glrp{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
+  .css-1y9glrp{animation:animation-ocj8pk 1s;}
 </style>
 <div class="css-1y9glrp">
 </div>
diff --git a/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap b/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
index f8e5385af9..183f2398a8 100644
--- a/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
+++ b/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
@@ -8,7 +8,7 @@ exports[`extractCriticalToChunks generates correct style tags using constructSty
   html{background:red;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 `;
 
@@ -20,7 +20,7 @@ exports[`extractCriticalToChunks generates correct style tags using constructSty
   html{background:red;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 `;
 
@@ -50,9 +50,6 @@ exports[`extractCriticalToChunks returns static css 1`] = `
     {
       "css": ".css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -97,9 +94,6 @@ exports[`extractCriticalToChunks returns static css 2`] = `
     {
       "css": ".css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/server/test/__snapshots__/index.test.js.snap b/packages/server/test/__snapshots__/index.test.js.snap
index eb505a59b3..a452b243d8 100644
--- a/packages/server/test/__snapshots__/index.test.js.snap
+++ b/packages/server/test/__snapshots__/index.test.js.snap
@@ -10,94 +10,34 @@ exports[`extractCritical returns static css 1`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -109,7 +49,6 @@ exports[`extractCritical returns static css 1`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -145,94 +84,34 @@ exports[`extractCritical returns static css 2`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -266,94 +145,34 @@ exports[`hydration only rules that are not in the critical css are inserted 1`]
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -365,7 +184,6 @@ exports[`hydration only rules that are not in the critical css are inserted 1`]
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
diff --git a/packages/server/test/__snapshots__/inline.test.js.snap b/packages/server/test/__snapshots__/inline.test.js.snap
index 696f13913c..2314561ff9 100644
--- a/packages/server/test/__snapshots__/inline.test.js.snap
+++ b/packages/server/test/__snapshots__/inline.test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`hydration only inserts rules that are not in the critical css 1`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -47,94 +47,34 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -146,7 +86,6 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -1963,14 +1902,14 @@ exports[`renderStylesToString renders large recursive component 1`] = `
 
 exports[`renderStylesToString renders styles with ids 1`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -1984,10 +1923,10 @@ exports[`renderStylesToString renders styles with ids 1`] = `
 
 exports[`renderStylesToString renders styles with ids 2`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <div>
diff --git a/packages/server/test/__snapshots__/stream.test.js.snap b/packages/server/test/__snapshots__/stream.test.js.snap
index d9a169dab1..d536b65616 100644
--- a/packages/server/test/__snapshots__/stream.test.js.snap
+++ b/packages/server/test/__snapshots__/stream.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`hydration only inserts rules that are not in the critical css 1`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -44,94 +44,34 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -143,7 +83,6 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -1957,11 +1896,11 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
 
 exports[`renderStylesToNodeStream renders styles with ids 1`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -1975,7 +1914,7 @@ exports[`renderStylesToNodeStream renders styles with ids 1`] = `
 
 exports[`renderStylesToNodeStream renders styles with ids 2`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <div>
diff --git a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
index 9ffd72ea73..7c5a7e2006 100644
--- a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
+++ b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
@@ -25,7 +25,6 @@ exports[`nested function using css and keyframes 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
index 7546e156c5..92ab9cea87 100644
--- a/packages/styled/__tests__/__snapshots__/styled.js.snap
+++ b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -69,13 +69,7 @@ exports[`styled composing components 1`] = `
 .emotion-0 {
   color: green;
   display: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -190,12 +184,7 @@ exports[`styled function in expression 1`] = `
 exports[`styled glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -209,7 +198,6 @@ exports[`styled glamorous style api & composition 1`] = `
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -236,8 +224,6 @@ exports[`styled higher order component 1`] = `
   font-size: 20px;
   background-color: #7fc8d6;
   background-color: '#343a40';
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -259,18 +245,6 @@ exports[`styled inline function return value is a function 1`] = `
 `;
 
 exports[`styled input placeholder 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -282,18 +256,6 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -316,7 +278,6 @@ exports[`styled keyframes with css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -327,9 +288,6 @@ exports[`styled keyframes with css call 1`] = `
 
 exports[`styled nested 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -423,12 +381,7 @@ exports[`styled object as className 1`] = `
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -443,7 +396,6 @@ exports[`styled object as style 1`] = `
 exports[`styled object composition 1`] = `
 .emotion-0 {
   border-radius: 50%;
-  -webkit-transition: -webkit-transform 400ms ease-in-out;
   transition: transform 400ms ease-in-out;
   border: 3px solid currentColor;
   width: 96px;
@@ -453,9 +405,6 @@ exports[`styled object composition 1`] = `
 }
 
 .emotion-0:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
@@ -467,9 +416,6 @@ exports[`styled object composition 1`] = `
 exports[`styled objects 1`] = `
 .emotion-0 {
   padding: 10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -602,9 +548,6 @@ You may have forgotten to import it."
 
 exports[`styled with higher order component that hoists statics 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: hotpink;
   padding: 8px;
diff --git a/packages/styled/test/__snapshots__/component-selector.test.js.snap b/packages/styled/test/__snapshots__/component-selector.test.js.snap
index 2c3b80fd73..f3d30f601a 100644
--- a/packages/styled/test/__snapshots__/component-selector.test.js.snap
+++ b/packages/styled/test/__snapshots__/component-selector.test.js.snap
@@ -2,9 +2,6 @@
 
 exports[`component as selector (object syntax) 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -31,9 +28,6 @@ exports[`component as selector (object syntax) 1`] = `
 
 exports[`component as selector 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -60,9 +54,6 @@ exports[`component as selector 1`] = `
 
 exports[`component as selector function interpolation (object syntax) 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -91,9 +82,6 @@ exports[`component as selector function interpolation (object syntax) 1`] = `
 
 exports[`component as selector function interpolation 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/styled/test/__snapshots__/composition.test.js.snap b/packages/styled/test/__snapshots__/composition.test.js.snap
index 019c5105d5..72e283d35b 100644
--- a/packages/styled/test/__snapshots__/composition.test.js.snap
+++ b/packages/styled/test/__snapshots__/composition.test.js.snap
@@ -4,13 +4,7 @@ exports[`composing components 1`] = `
 .emotion-0 {
   color: green;
   display: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -110,12 +104,7 @@ exports[`composition with objects 1`] = `
 exports[`glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -130,7 +119,6 @@ exports[`glamorous style api & composition 1`] = `
 exports[`object composition 1`] = `
 .emotion-0 {
   border-radius: 50%;
-  -webkit-transition: -webkit-transform 400ms ease-in-out;
   transition: transform 400ms ease-in-out;
   border: 3px solid currentColor;
   width: 96px;
@@ -140,9 +128,6 @@ exports[`object composition 1`] = `
 }
 
 .emotion-0:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap
index f988c14394..040c105d6b 100644
--- a/packages/styled/test/__snapshots__/index.test.js.snap
+++ b/packages/styled/test/__snapshots__/index.test.js.snap
@@ -95,7 +95,6 @@ exports[`styled function that function returns gets called with props 1`] = `
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -130,18 +129,6 @@ exports[`styled inline function return value is a function 1`] = `
 `;
 
 exports[`styled input placeholder 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -153,18 +140,6 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -177,9 +152,6 @@ exports[`styled input placeholder object 1`] = `
 
 exports[`styled nested 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -223,12 +195,7 @@ exports[`styled no dynamic 1`] = `
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -243,9 +210,6 @@ exports[`styled object as style 1`] = `
 exports[`styled objects 1`] = `
 .emotion-0 {
   padding: 10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -318,9 +282,6 @@ You may have forgotten to import it."
 
 exports[`styled with higher order component that hoists statics 1`] = `
 .emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: hotpink;
   padding: 8px;