CSS @keyframes Rule
CSS @keyframes Rule
The @keyframes rule is used to specify the animation code. It is created by gradually changing from one set of CSS styles to another. During the animation, we can change the set of CSS styles many times. We can style change will happen in percent, or with the keywords from and to. 0% is the beginning of the animation, and 100% is when the animation is complete.
Syntax:-
Its syntax is:- @keyframes animationname {keyframes-selector {css-styles;}}
Further Explanation:-
| Value | Description |
|---|---|
| animationname | Required. Defines the name of the animation. |
| keyframes-selector | Required. Percentage of the animation duration. |
| css-styles | Required. One or more legal CSS style properties |
Code Explanation
All Tutorials related to CSS Properties
accent-color Property in CSS
align-content Property in CSS
align-items Property in CSS
align-self Property in CSS
all Property in CSS
animation Property in CSS
animation-delay Property in CSS
animation-direction Property in CSS
animation-duration Property in CSS
animation-fill-mode Property in CSS
animation-iteration-count Property in CSS
animation-name Property in CSS
animation-play-state Property in CSS
animation-timing-function Property in CSS
backdrop-filter Property in CSS
backface-visibility Property in CSS
background Property in CSS
background-attachment Property in CSS
background-blend-mode Property in CSS
background-clip Property in CSS
background-color Property in CSS
background-image Property in CSS
background-origin Property in CSS
background-position Property in CSS
background-repeat Property in CSS
background-size Property in CSS
border Property in CSS
border-bottom Property in CSS
border-bottom-color Property in CSS
border-bottom-left-radius Property in CSS
border-bottom-right-radius Property in CSS
border-bottom-style Property in CSS
border-bottom-width Property in CSS
border-collapse Property in CSS
border-color Property in CSS
border-image Property in CSS
border-image-outset Property in CSS
border-image-repeat Property in CSS
border-image-slice Property in CSS
border-image-source Property in CSS
border-image-width Property in CSS
border-left Property in CSS
border-left-color Property in CSS
border-left-style Property in CSS
border-left-width Property in CSS
border-radius Property in CSS
border-right Property in CSS
border-right-color Property in CSS
border-right-style Property in CSS
border-right-width Property in CSS
border-spacing Property in CSS
border-style Property in CSS
border-top Property in CSS
border-top-color Property in CSS
border-top-left-radius Property in CSS
border-top-right-radius Property in CSS
border-top-style Property in CSS
border-top-width Property in CSS
CSS border-width Property
bottom Property in CSS
box-decoration-break Property in CSS
box-shadow Property in CSS
box-sizing Property in CSS
break-after Property in CSS
break-before Property in CSS
break-inside Property in CSS
caption-side Property in CSS
caret-color Property in CSS
@charset Rule in CSS
clear Property in CSS
clip Property in CSS
color Property in CSS
column-count Property in CSS
column-fill Property in CSS
column-gap Property in CSS
column-rule Property in CSS
column-rule-color Property in CSS
column-rule-style Property in CSS
column-rule-width Property in CSS
column-span Property in CSS
column-width Property in CSS
columns Property in CSS
content Property in CSS
counter-increment Property in CSS
counter-reset Property in CSS
cursor Property in CSS
direction Property in CSS
display Property in CSS
empty-cells Property in CSS
filter Property in CSS
flex Property in CSS
flex-basis Property in CSS
flex-direction Property in CSS
flex-flow Property in CSS
flex-grow Property in CSS
flex-shrink Property in CSS
flex-wrap Property in CSS
float Property in CSS
font Property in CSS
@font-face Rule in CSS
font-family Property in CSS
font-feature-settings Property in CSS
font-kerning Property in CSS
font-size Property in CSS
font-stretch Property in CSS
font-style Property in CSS
font-variant Property in CSS
font-variant-caps Property in CSS
font-weight Property in CSS
gap Property in CSS
grid Property in CSS
grid-area Property in CSS
grid-auto-columns Property in CSS
grid-auto-flow Property in CSS
grid-auto-rows Property in CSS
grid-column Property in CSS
grid-column-end Property in CSS
grid-column-gap Property in CSS
grid-column-start Property in CSS
grid-gap Property in CSS
grid-row Property in CSS
grid-row-end Property in CSS
grid-row-gap Property in CSS
grid-row-start Property in CSS
grid-template Property in CSS
grid-template-areas Property in CSS
grid-template-columns Property in CSS
grid-template-rows Property in CSS
hanging-punctuation Property in CSS
height Property in CSS
hyphens Property in CSS
image-rendering Property in CSS
isolation Property in CSS
justify-content Property in CSS
@keyframes Rule in CSS
left Property in CSS
letter-spacing Property in CSS
line-height Property in CSS
list-style Property in CSS
list-style-image Property in CSS
list-style-position Property in CSS
list-style-type Property in CSS
margin Property in CSS
margin-bottom Property in CSS
margin-left Property in CSS
margin-right Property in CSS
margin-top Property in CSS
mask-image Property in CSS
mask-mode Property in CSS
mask-origin Property in CSS
mask-position Property in CSS
mask-repeat Property in CSS
mask-size Property in CSS
max-height Property in CSS
max-width Property in CSS
@media Rule in CSS
min-height Property in CSS
min-width Property in CSS
mix-blend-mode Property in CSS
object-fit Property in CSS
object-position Property in CSS
opacity Property in CSS
order Property in CSS
orphans Property in CSS
outline Property in CSS
outline-color Property in CSS
outline-offset Property in CSS
outline-style Property in CSS
outline-width Property in CSS
overflow Property in CSS
overflow-wrap Property in CSS
overflow-x Property in CSS
overflow-y Property in CSS
padding Property in CSS
padding-bottom Property in CSS
padding-left Property in CSS
padding-right Property in CSS
padding-top Property in CSS
page-break-after Property in CSS
page-break-before Property in CSS
page-break-inside Property in CSS
perspective Property in CSS
perspective-origin Property in CSS
pointer-events Property in CSS
position Property in CSS
quotes Property in CSS
resize Property in CSS
right Property in CSS
row-gap Property in CSS
scroll-behavior Property in CSS
tab-size Property in CSS
table-layout Property in CSS
text-align Property in CSS
text-align-last Property in CSS
text-decoration Property in CSS
text-decoration-color Property in CSS
text-decoration-line Property in CSS
text-decoration-style Property in CSS
text-decoration-thickness Property in CSS
text-emphasis Property in CSS
text-indent Property in CSS
text-justify Property in CSS
text-overflow Property in CSS
text-shadow Property in CSS
text-transform Property in CSS
top Property in CSS
transform Property in CSS
transform-origin Property in CSS
transform-style Property in CSS
transition Property in CSS
transition-delay Property in CSS
transition-duration Property in CSS
transition-property Property in CSS
transition-timing-function Property in CSS
unicode-bidi Property in CSS
user-select Property in CSS
vertical-align Property in CSS
visibility Property in CSS
white-space Property in CSS
widows Property in CSS
width Property in CSS
word-break Property in CSS
word-spacing Property in CSS
word-wrap Property in CSS
writing-mode Property in CSS
z-index Property in CSS
