// @flow
import baseStyles from '../../../styles/resets/base.css.js'
import sequencesStyles from './sequences/index.css.js'

const css = `
  ${baseStyles}
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  visibility: hidden;

  &.ax-entering {
    visibility: hidden;
  }
  &.ax-entered {
    visibility: visible;
  }
  &.ax-exiting {
    visibility: visible;
  }
  &.ax-exited {
    visibility: hidden;
  }

  &.is-block {
    display: block;
  }
  &.is-inline {
    display: inline;
  }
  &.is-inlineBlock {
    display: inline-block;
  }

  ${sequencesStyles}
`

export default css

// @flow
import baseStyles from '../../../styles/resets/base.css.js'
import sequencesStyles from './sequences/index.css.js'

const css = `
  ${baseStyles}
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;

  &.is-block {
    display: block;
  }
  &.is-inline {
    display: inline;
  }
  &.is-inlineBlock {
    display: inline-block;
  }

  ${sequencesStyles}
`

export default css

Improve rendering for Safari (iOS)
Animate: Improve rendering for Safari (iOS)

This update removes the `visibility` CSS prop from the `Animate` lifecycle
styles. After some investigating/testing, I've noticed that this is somehow
causing render issues in iOS Safari (for certain render cases).

Elements would stay invisible, unless a repaint/re-render is forced.

By removing this CSS prop, we avoid potential visibility render issues
all together!
