JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<h1>Animating Flex</h1>
<p>Works in Chrome, does not work in Safari</p>
<div class='flex-wrapper'>
  <div class='animate-grow-flex other-styles'>
      a div that animates the CSS `flex` rule
  </div>
</div>

<h1>Animating Width</h1>
<p>Works in both Chrome and Safari</p>
<div class='animate-grow-width other-styles'>
  a div that animates the CSS `width` rule
</div>

CSS

@keyframes grow-flex {
  0% { flex: 0.00001; } 
  100% { flex: 1; }
}

@keyframes grow-width {
  0% { width: 10%; } 
  100% { width: 100%; }
}

.flex-wrapper {
  display: flex;
}

.animate-grow-flex {
  animation-name: grow-flex;
  animation-duration: 5s;
  flex: 1; // base
}

.animate-grow-width {
  animation-name: grow-width;
  animation-duration: 5s;
}

.other-styles {
  background: red;
  height: 100px;
}