freeCodeCamp's Animate Multiple Elements at Variable Rates, Applied Visual Design

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


Duration: 1:55
26 views
0

In this freeCodeCamp lesson from the Applied Visual Design section we are also making our stars twinkle at different rates. In our last lesson we changed the percent of one of our animations in the @keyframes rule. In this lesson we are setting our animation-duration for our 3 stars at different times. This gives the appearance of much more natural twinkles.



Other Videos By We Will Code


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
2018-09-28freeCodeCamp's Use the CSS Transform Property skewY to Skew


Tags:
CSS keyframes
@keyframes
css animation
animation duration
infinite animation count