CSS Animation
The world of CSS animation with Justin Monserrat and Jordan Schiff. Learn how to create engaging animations for your website using CSS properties and keyframe animations. This comprehensive guide covers everything from basic animations to complex transitions, providing you with the skills to bring your designs to life and captivate your audience. Whether you're a beginner or an experienced developer, this book will take your animation skills to the next level.
Uploaded on Feb 15, 2025 | 1 Views
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
CSS Animation By: Justin Monserrat & Jordan Schiff
@keyframes DEFINITION DEFINITION EXAMPLE EXAMPLE /* The animation code */ @keyframes example { from {background-color: red;} to {background-color: yellow;} } When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. /* The element to apply the animation to */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; } To get an animation to work, you must bind the animation to an element.
Animation Duration Delay Iteration The animation-iteration-count property specifies the number of times an animation should run. The animation-duration property defines how long an animation should take to complete. The animation-delay property specifies a delay for the start of an animation. You can use any number values, like 3 to run it three times, or you can use, infinite, so the animation goes on forever. If the property is not specified, no animation will occur, because the default value is 0s. If you put, 2s, it will wait 2 seconds before starting. You can also do negative time, such as, -2s, and it will start the animation as if 2 seconds have already passed.
Animation Directions Normal The animation is played as normal (forwards). This is the default Reverse The animation is played in reverse direction (backwards). Alternate The animation Is played forwards first, then backwards. Alternate-reverse The animation is played backwards first, then forwards.
Speed Curve The animation-timing-function property specifies the speed curve animation. It can have the following values. Specifies an animation with a slow start, then fast, then ends slowly. This is the default. Ease Specifies an animation with the same speed from start to end. Linear Specifies an animation with a slow start. Ease-in Specifies an animation with a slow end. Ease-out Specifies an animation with a slow start and end. Ease-in-out
Shorthand div { animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; } div { animation: example, 5s, linear, 2s, infinite, alternate; }
CREDITS This presentation template is free for everyone to use thanks to the following: SLIDESCARNIVAL for the presentation template PEXELS for the photos
