freeCodeCamp's Change Animation Timing with Keywords, Responsive Web Design

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


Duration: 2:02
49 views
0

In this challenge we look at the animation-timing-function. We learn that we can use the animation-timing function to control the speed and timing of an animated element during the time it plays (animation-duration controls how long our animation will run as we learned in previous lessons). We learn that there are predefined keywords we can use and the default value is "ease". Ease starts slow, then in the middle it speeds up, and finally it slows again. In this challenge we have to elements with the id's #ball1 and #ball2. We give each an animation-timing-function with the values of linear, and ease-out respectively.



Other Videos By We Will Code


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
2018-09-30freeCodeCamp's Create a Graphic Using CSS, Applied Visual Design


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