[data-ssc] {
    transition-property: opacity, transform;
    transition-duration: 1s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-timeline: view();
  }
  
  [data-ssc-exit] {
    animation-range: exit;
  }
  [data-ssc-entry-exit] {
    opacity: 0;
    animation-range: entry 50% cover 150%;
  }
  
  [data-ssc-instant] {
    animation-timeline: unset;
  }
  
  [data-ssc="fade-in"] {
    animation-name: fadeIn;
  }
  [data-ssc="fade-out"] {
    animation-name: fadeOut;
  }
  [data-ssc="fade-up"] {
    animation-name: fadeUp;
  }
  [data-ssc="fade-down"] {
    animation-name: fadeDown;
  }
  [data-ssc="fade-left"] {
    animation-name: fadeLeft;
  }
  [data-ssc="fade-right"] {
    animation-name: fadeRight;
  }
  [data-ssc="fade-up-left"] {
    animation-name: fadeUpLeft;
  }
  [data-ssc="fade-up-right"] {
    animation-name: fadeUpRight;
  }
  [data-ssc="fade-down-left"] {
    animation-name: fadeDownLeft;
  }
  [data-ssc="fade-down-right"] {
    animation-name: fadeDownRight;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  
  @keyframes fadeUp {
    from { transform: translate3d(0, 100px, 0); opacity: 0; }
    to { transform: translateZ(0); opacity: 1; }
  }
  
  @keyframes fadeDown {
    from { transform: translate3d(0, -100px, 0); opacity: 0; }
    to { transform: translateZ(0); opacity: 1; }
  }
  
  @keyframes fadeRight {
    0%,100% { transform: translate3d(-100px, 0, 0); opacity: 0; }
    50% { transform: translateZ(0); opacity: 1; }
  }
  
  @keyframes fadeLeft {
    0%,100% { transform: translate3d(100px, 0, 0); opacity: 0; }
    50% { transform: translateZ(0); opacity: 1; }
  }
  
  @keyframes fadeUpLeft {
    from { transform: translate3d(100px, 100px, 0); opacity: 0; }
    to { transform: translateZ(0); opacity: 1; }
  }
  
  @keyframes fadeUpRight {
    from { transform: translate3d(-100px, 100px, 0); opacity: 0; }
    to { transform: translateZ(0); opacity: 1; }
  }
  
  @keyframes fadeDownLeft {
    from { transform: translate3d(100px, -100px, 0); opacity: 0; }
    to { transform: translateZ(0); opacity: 1; }
  }
  
  @keyframes fadeDownRight {
    from { transform: translate3d(-100px, -100px, 0); opacity: 0; }
    to { transform: translateZ(0); opacity: 1; }
  }
  
  [data-ssc="flip-"] {
    transform: perspective(2500px) rotate(0);
    backface-visibility: hidden;
    transition-property: transform;
  }
  
  [data-ssc="flip-left"] {
    animation-name: flipLeft;
  }
  [data-ssc="flip-right"] {
    animation-name: flipRight;
  }
  [data-ssc="flip-up"] {
    animation-name: flipUp;
  }
  [data-ssc="flip-down"] {
    animation-name: flipDown;
  }
  
  @keyframes flipLeft {
    from { transform: perspective(2500px) rotateY(-100deg); }
    to { transform: perspective(2500px) rotateY(0); }
  }
  
  @keyframes flipRight {
    from { transform: perspective(2500px) rotateY(100deg); }
    to { transform: perspective(2500px) rotateY(0); }
  }
  
  @keyframes flipUp {
    from { transform: perspective(2500px) rotateX(-100deg); }
    to { transform: perspective(2500px) rotateX(0); }
  }
  
  @keyframes flipDown {
    from { transform: perspective(2500px) rotateX(100deg); }
    to { transform: perspective(2500px) rotateX(0); }
  }
  
  [data-ssc^="zoom"] {
    transition-property: opacity, transform;
  }
  
  [data-ssc="zoom-in"] {
    animation-name: zoomIn;
  }
  [data-ssc="zoom-in-up"] {
    animation-name: zoomInUp;
  }
  [data-ssc="zoom-in-down"] {
    animation-name: zoomInDown;
  }
  [data-ssc="zoom-in-left"] {
    animation-name: zoomInLeft;
  }
  [data-ssc="zoom-in-right"] {
    animation-name: zoomInRight;
  }
  [data-ssc="zoom-out"] {
    animation-name: zoomOut;
  }
  [data-ssc="zoom-out-up"] {
    animation-name: zoomOutUp;
  }
  [data-ssc="zoom-out-down"] {
    animation-name: zoomOutDown;
  }
  [data-ssc="zoom-out-left"] {
    animation-name: zoomOutLeft;
  }
  [data-ssc="zoom-out-right"] {
    animation-name: zoomOutRight;
  }