137 lines
4.0 KiB
Markdown
137 lines
4.0 KiB
Markdown
---
|
|
id: 587d78a9367417b2b2512ae8
|
|
title: Learn How Bezier Curves Work
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
|
forumTopicId: 301058
|
|
dashedName: learn-how-bezier-curves-work
|
|
---
|
|
|
|
# --description--
|
|
|
|
The last challenge introduced the `animation-timing-function` property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.
|
|
|
|
In CSS animations, Bezier curves are used with the `cubic-bezier` function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.
|
|
|
|
The `cubic-bezier` function consists of four main points that sit on this 1 by 1 grid: `p0`, `p1`, `p2`, and `p3`. `p0` and `p3` are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the `p1` and `p2` "anchor" points in the form: `(x1, y1, x2, y2)`. Pulling it all together, here's an example of a Bezier curve in CSS code:
|
|
|
|
```css
|
|
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
|
```
|
|
|
|
In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the `linear` keyword. In other words, it changes at a constant speed.
|
|
|
|
# --instructions--
|
|
|
|
For the element with the id of `ball1`, change the value of the `animation-timing-function` property from `linear` to its equivalent `cubic-bezier` function value. Use the point values given in the example above.
|
|
|
|
# --hints--
|
|
|
|
The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent `cubic-bezier` function.
|
|
|
|
```js
|
|
assert(
|
|
$('#ball1').css('animation-timing-function') ==
|
|
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
|
);
|
|
```
|
|
|
|
The value of the `animation-timing-function` property for the element with the id `ball2` should not change.
|
|
|
|
```js
|
|
const ball2Animation = __helpers.removeWhiteSpace(
|
|
$('#ball2').css('animation-timing-function')
|
|
);
|
|
assert(
|
|
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```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: linear;
|
|
}
|
|
#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>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```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>
|
|
```
|