# freeCodeCamp Challenge Guide: Learn How Bezier Curves Work

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-learn-how-bezier-curves-work/301058>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [August 3, 2019, 5:30am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-learn-how-bezier-curves-work/301058 "2019-08-03T05:30:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 3, 2019, 5:30am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-learn-how-bezier-curves-work/301058/1 "2019-08-03T05:30:55Z")

</div>

# [Learn How Bezier Curves Work](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/learn-how-bezier-curves-work)

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> ```html
> <style>
> 
> .balls{
> border-radius: 50%;
> background: linear-gradient(
> 35deg,
> #ccffff,
> #ffcccc
> );
> position: fixed;
> width: 50px;
> height: 50px;
> margin-top: 50px;
> animation-name: bounce;
> animation-duration: 2s;
> animation-iteration-count: infinite;
> }
> #ball1 {
> left: 27%;
> animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
> }
> #ball2 {
> left: 56%;
> animation-timing-function: ease-out;
> }
> 
> @keyframes bounce {
> 0% {
> top: 0px;
> }
> 100% {
> top: 249px;
> }
> }
> </style>
> <div class="balls" id="ball1"></div>
> <div class="balls" id="ball2"></div>
> 
> ```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:59pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-learn-how-bezier-curves-work/301058/2 "2025-01-08T15:59:25Z")

</div>

Closed on January 8, 2025, 3:59pm UTC