freeCodeCamp's Create Visual Direction by Fading an Element From Left To Right

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


Duration: 1:37
75 views
0

In this lesson from the Applied Visual Design section we look at fading an element from left to right. We utilize the keyframes rule to do this as well as the opacity attribute. By combining these tools together as well as specifying a left property, we can tell our eleement what to do at certain @keyframes to give the the appearance of a sphere moving and fading away. Practice using different values and see all the different things that are possible.



Other Videos By We Will Code


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
2018-09-28freeCodeCamp's Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Scale an Element on Hover
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Change the Size of an Element
2018-09-26freeCodeCamp's Create Texture by Adding a Subtle Pattern as a Background Image, url function


Tags:
CSS keyframes
@keyframes
css animation
animations in css
animation duration
css movement
css fade