CSS3 @keyframes can be used to create more complex effects by setting multiple points in a single animation. In this video, take a look at how to create CSS animations with @keyframes.
- [Instructor] In a previous lesson,…we talked about using the transition property…to create animation effects.…The transition only allows you to have a start…and end point.…With @keyframes you can create more complex effects…by setting multiple points for your animations.…Let's take a look at an example.…In this demo, this bouncing effect…is created by changing the top value of the circle…at different points throughout the duration…of the animation created with @keyframes.…Let's take a closer look at the syntax.…
The Keyframe rule requires three things to be defined.…A name for the animation, the breakpoints,…and the CSS properties to be animated.…To define the animation, start with the @keyframes keyword.…Then define a name for the animation…followed by a pair of curly braces.…Choose a descriptive name that describes the effect…or animation that you're creating.…Then set your breakpoints.…Use a percentage amount for your animation breakpoints.…Breakpoints are added between the @keyframes set…of curly braces.…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.