freeCodeCamp's Learn How Bezier Curves Work, Applied Visual Design

Channel:
United States We Will Code
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=wFF68BkOyI4


Duration: 4:13
153 views
1

In this lesson we learn what an equivelent solution for our animation-timing-function with a value of linear. We do this by using bezier curves. We learn that the cubic-bezier function is used with Bezier curves. The curve's shape tells how the animation will play out. The functions X-axis is the duration while the the Y-axis, the change that occurs in the animation.



Other Videos By We Will Code


2018-11-09freeCodeCamp's Intro To Javascript, Understanding Arrays & Multi-Dimensional Arrays (6)
2018-11-08freeCodeCamp's Using Bracket Notation on Strings, Mad Libs, Intro to Javascript (5)
2018-11-03freeCodeCamp's Javascript Introduction, Escape Sequences, Concatenation. String Length (4)
2018-11-02freeCodeCamp's Intro to Javascript, Compound Assignment & String Literals (3)
2018-10-31freeCodeCamp's Make an Image Responsive,Web Design Principles
2018-10-30freeCodeCamp's Introduction to Javascript, Math Operators in JS (pt.2)
2018-10-29freeCodeCamp's Introduction to Javascript, Comments, Variables, & Casing
2018-10-29Create a Media Query, Responsive Web Design
2018-10-28freeCodeCamp's Make Motion More Natural Using a Bezier Curve
2018-10-28freeCodeCamp's Use a Bezier Curve to Move a Graphic, Applied Visual Design
2018-10-28freeCodeCamp's Learn How Bezier Curves Work, Applied Visual Design
2018-10-26freeCodeCamp's Change Animation Timing with Keywords, Responsive Web Design
2018-10-25freeCodeCamp's Animate Multiple Elements at Variable Rates, Applied Visual Design
2018-10-25freeCodeCamp's Animate Elements at Variable Rates, Applied Visual Design
2018-10-14freeCodeCamp's Make a CSS Heartbeat using an Infinite Animation Count
2018-10-14freeCodeCamp's Animate Elements Continually Using an Infinite Animation Count
2018-10-10freeCodeCamp's Create Visual Direction by Fading an Element From Left To Right
2018-10-09freeCodeCamp's Create Movement Using CSS Animation, Applied Visual Design
2018-10-04freeCodeCamp's Modify Fill Mode of an Animation, Applied Visual Design
2018-10-04freeCodeCamp's Use CSS Animation to Change the Hover State of A Button, Applied Visual Design
2018-10-01freeCodeCamp's Create a More Complex Shape Using CSS and HTML


Tags:
CSS keyframes
@keyframes
css animation
animation duration
animation-timing-function
bezier curves