Definition and Usage
சில CSS பண்புகள் இயங்குதன்மை கொண்டவை, அதாவது அவற்றை அனிமேஷன்கள் மற்றும் மாற்றங்களில் பயன்படுத்தலாம்.
இயங்குதன்மை கொண்ட பண்புகள் ஒரு மதிப்பிலிருந்து மற்றொரு மதிப்புக்கு படிப்படியாக மாறலாம், அளவு, எண்கள், சதவீதம் மற்றும் நிறம் போன்றவை.
Browser Support
அனிமேஷன் பண்புகள் அனைத்து நவீன உலாவிகளிலும் ஆதரிக்கப்படுகின்றன.
அட்டவணையில் உள்ள எண்கள் CSS அனிமேஷன்களை முழுமையாக ஆதரிக்கும் முதல் உலாவி பதிப்பைக் குறிக்கிறது.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 43 | 10 | 16 | 9 | 30 |
Example
பின்புல நிறத்தை சிவப்பிலிருந்து நீலமாக அனிமேட் செய்யவும்:
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}குறிப்பு:
@keyframes விதி ஒரு அனிமேஷனை வரையறுக்கிறது. "from" மற்றும் "to" சொற்கள் அனிமேஷனின் தொடக்க மற்றும் முடிவு நிலைகளைக் குறிக்கின்றன.
Animatable Properties
இந்த பண்புகள் CSS இல் இயங்குதன்மை கொண்டவை:
aspect-ratio
background
background-color
background-position
background-position-x
background-position-y
background-size
block-size
border
border-bottom
border-bottom-color
border-end-end-radius
border-end-start-radius
border-block
border-block-color
border-block-end-color
border-block-end-width
border-block-start-color
border-block-start-width
border-block-width
border-bottom-left-radius
border-bottom-right-radius
border-inline
border-inline-color
border-inline-end-color
border-inline-end-width
border-inline-start-color
border-inline-start-width
border-inline-width
border-start-end-radius
border-start-start-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
clip
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
height
inline-size
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
left
letter-spacing
line-height
margin
margin-block
margin-block-end
margin-block-start
margin-bottom
margin-inline
margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
max-height
max-width
max-block-size
max-inline-size
min-block-size
min-inline-size
min-height
min-width
object-position
offset-anchor
offset-distance
offset-path
offset-rotate
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
perspective
perspective-origin
right
rotate
scale
text-decoration-color
text-indent
text-shadow
top
transform
transform-origin
translate
vertical-align
visibility
width
word-spacing
z-index