Complete Guide to "Animations in CSS" For Beginner

In this video i will talk about Animations in CSS

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property.

Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property, or its eight sub-properties, to give more control over how those keyframes should be manipulated.

Sub-properties
animation-name: declares the name of the @keyframes at-rule to manipulate.

animation-duration: the length of time it takes for an animation to complete one cycle.

animation-timing-function: establishes preset acceleration curves such as ease or linear.

animation-delay: the time between the element being loaded and the start of the animation sequence (cool examples).

animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.

animation-iteration-count: the number of times the animation should be performed.

animation-fill-mode: sets which values are applied before/after the animation.

For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.

animation-play-state: pause/play the animation.

#css 

What is GEEK

Buddha Community

Complete Guide to "Animations in CSS" For Beginner

Complete Guide to "Animations in CSS" For Beginner

In this video i will talk about Animations in CSS

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property.

Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property, or its eight sub-properties, to give more control over how those keyframes should be manipulated.

Sub-properties
animation-name: declares the name of the @keyframes at-rule to manipulate.

animation-duration: the length of time it takes for an animation to complete one cycle.

animation-timing-function: establishes preset acceleration curves such as ease or linear.

animation-delay: the time between the element being loaded and the start of the animation sequence (cool examples).

animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.

animation-iteration-count: the number of times the animation should be performed.

animation-fill-mode: sets which values are applied before/after the animation.

For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.

animation-play-state: pause/play the animation.

#css 

Create Hover Animations in CSS | HTML & CSS Tutorial

In this video I show you how to add hover effects using CSS. This is a react To Do List application that has several list items. I show you how to add a box shadow around each item and then add a hover effect with scaling and increasing the blur and spread of the shadow.

Check the code out here: https://codepen.io/angeladelise/pen/LYPQmbR

#html #css