🍿 Transitions and Animations

Cssta provides convenience features around React’s Animated API. The syntax is identical to CSS (where supported).

Because of the declarative nature of CSS, only components that use these features will run code for the features. What’s more, if no components use these features, the code isn’t even shipped in your production bundle!

Because we use the CSS spec, you can find a tonne of stuff on MDN. Check our tables below to see what we support.

Transitions

âś… transition _
âś… transition-delay
âś… transition-duration
âś… transition-property _
âś… transition-timing-function 
const ButtonWithTransition = cssta(Animated.View)`
  background-color: blue;
  color: white;

  transition:
    background-color 0.5s ease-in,
    color 0.7s ease-in

  &[@disabled] {
    background-color: gray;
    color: light-gray;
  }
`;

Animations

âś… animation
âś… animation-delay
❌ animation-direction
âś… animation-duration
❌ animation-fill-mode **
âś… animation-iteration-count ***
❌ animation-play-state
âś… animation-name ****
âś… animation-timing-function
âś… @keyframes 
const ButtonWithKeyframes = cssta(Animated.View)`
  animation: fade-in 1s ease-in;

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
`;

Notes

You can animate multiple transforms, but the nodes of the transform must not change. I.e, you can animate transform: scaleX(1) rotateX(0deg) to transform: scaleX(5) rotateX(30deg), but you cannot then transform to transform: scaleY(5) skew(30deg).

* Transition properties cannot currently be shorthands, including things like border-width, but you can write transition-property: border-top-width, border-right-width …. You also cannot use custom properties to define them.

** Currently uses value of fill-forwards

*** Must be a whole number or infinite

**** Animations currently only support up to one animation

🎥 Custom Animations via Animated.Value

For more complicated animations, you’ll want to define a base component that has all your non-changing styles. You’ll then want a second component that has control over some Animated.Values.

In your second component’s render function, return the base component along with your animated values passed in the style prop.

const BaseStyles = cssta(View)`
  height: 100px;
  width: 100px;
  background-color: red;
`;

const AnimateOpacity = () => {
  const [opacity] = React.useState(() => new Animated.Value(0));

  React.useLayoutEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000
    }).start();
  }, []);

  return <BaseStyles style={{ opacity }} />;
};