# Animations

Instead of one transition with transitions, can have up to an infinite number of iterations, grandular control

* @keyframes
* animation-name
* animation-duration
* animation-timing-function
* animation-iteration-count
* animation-direction
* animation-play-state
* animation-delay
* animation-fill-mode
* animation (shorthand)

## @Keyframe

```css
@keyframes clever_name_here ...
```

```css
@keyframes writing {
    from { /*same as 0%*/
        left: 0;
    }

    to { /*same as 100%*/
        left: 100%;
    }
}
```

* % basically the total animation time
* !important not important in animations
* It repaints the page when you change left/top, should use transform 

```css
/*zigzag across screen*/
@keyframes w {
    0% {
        left: 0;
        top: 0;
    }
    25%, 75% {
        top: 400px;
    }
    50% {
        top: 50px;
    }
    100% {
        left: 80%;
        top: 0;
    }
}
```

### Using Keyframe

* By default happens once
* Can have multiple animations happening on same element at same time, last declared animation overrides other props if same props

```css
.pencil {
    animation-name: w;
    animation-duration: 3s;
}
```

## Timing Function

linear |ease-in-out|ease-in|ease-out|step-start|step-end|ease|steps(X, start|**end**)|cubic-bezier(x1, y1, x2, y2)

* [see how it looks](https://github.com/jsfuentes/Code-Cheatsheet/tree/87ee5822de85f9d5b978c2f8b59be2a5679be7a5/CSS/cubic-bezier.com)

### Steps

Discrete steps

start/end is which frame you drop i.e 2-4-6-8-10 or 0-2-4-6-8-10

Sprites(is a strip animate with:), add second animation to make it move across screen

```css
.biker {
  height: 92px;
  width: 90px;
  background-image: url(../static/img/bike.png);
  background-repeat: no-repeat;
  animation: pedal 400ms steps(4, end) infinite; 
}
@keyframes pedal { 
    100% {background-position: -360px 0;}
}
```

## Iteration-count

Can even do partial count so cuts off

## Animation-delay

Can even do negative and skips in animation time

## Animation-Direction

normal | alternate|reverse|alternate-reverse

## Animation(shorthand)

name duration delay timing-function iteration-count

```css
.pencil {
    animation: test 5s ease-in-out 100ms 5;
}
```

## Animation Fill Mode

None | forwards | backwards | both

What do after last animation?

* None: go back
* forwards: keep at 100%
* backwards: keep at 0% during animation delay/start

### Play-state

```css
.pencil:hover{
    Animation-play-state: paused;
}
```

Running | paused

## Events

* animationstart
* animationend
* animationiteration

Can add and remove class of animation at animation end to restart event(put slight delay on regiving class)

## Advanced

#### On Unmount Animation

```
function OrgOnboarding() {
  const [step, setStep] = useState(1);
  const debouncedStep = useDebounce(step, 5000);

  return (
    <div className="h-screen w-screen bg-gray-100 flex flex-col">
      <div className="flex-1 flex items-center justify-center">
        {(step === 1 || debouncedStep === 1) && (
          <OnboardingPart1
            className={step === 1 ? "animateSlideRight" : "animateSlideLeft"}
            onSubmit={() => setStep(2)}
          />
        )}
        {(step === 2 || debouncedStep === 2) && (
          <OnboardingPart2
            className={step === 2 ? "animateSlideRight" : "animateSlideLeft"}
            onSubmit={() => setStep(1)}
          />
        )}
      </div>
    </div>
  );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://openai.gitbook.io/code-cheatsheets/css/animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.