Lead image courtesy of Alltechbuzz on Pexels . Web animations can be used to attract attention, engage people better, and communicate more clearly and effectively. It can engage and hold people's attention longer than just a static web page. The Rule @keyframes When you specify CSS styles inside the @keyframes rule, the animation will gradually change form the current style to the new style at certain times. The animation is specified by using two types keywords: - and . from to 0% - 100% NOTE: By using per cent, you can add as many style changes as you like, For Example On (0%, 20%, 40%, 80% and 100%). Example: To get an animation to work, you must bind the animation to an element. { : ; : ; : orange; : false; : ; } @ fade { { : ; } { : ; } } .content width 100px height 100px color animation-name animation-duration 0.3s keyframes from opacity 0 to opacity 1 If the property is not specified, no animation will occur, because the default value is . animation-duration 0s Delay an Animation The property specifies a delay for the start of an animation animation-delay Iteration of an Animation The property specifies the number of times an animation should run. animation-iteration-count Direction of an Animation The property specifies whether an animation should be played forwards, backwards or in alternate cycles. animation-direction The animation-direction property can have the following: - default normal - The animation is played in reverse direction(backwards) reverse - The animation is played forwards first, then backwards alternate - The animation is played backwards first, then forwards alternate-reverse Specify the Speed Curve of the Animation The property specifies the speed curve of the animation. animation-timing-function The animation-timing-function property can have the following values: - Slow start, then fast, then end slowly (default) ease - Same speed from start to end linear - slow start ease-in - Slow end ease-out - Slow start and end ease-in-out - Lets you define your own values in a cubic-bezier function. cubicbezier(n,n,n,n) Specify the Fill-Mode for an Animation Animation does not affect an element before the first is played or after the last is played. The property is used to override this behavior. keyframe keyframe animation-fill-mode The property specifies a style for the target element when the animation is not playing (before it starts after it ends, or both) animation-fill-mode - Animation will not apply any styles none - The element will retain the style values that are set by the last keyframe forwards - The element will retain style values that are set by the first keyframe backwards - Retain style from first and last both. both Animation Shorthand Property { : ; : ; : orange; : fade ease reverse forwards; } .content width 100px height 100px color /*animation: name duration timing-function delay iteration-count direction filll-mode*/ animation 0.3s 1s 1 ⌛ Thanks For Reading | Happy Coding 🍵 SUPPORT ME Previously published here .
