CSS ஐப் பயன்படுத்தி Animation செய்வது எப்படி?

உங்களுடைய சந்தேகங்கள் கேள்விகளை எங்களுடன் பகிர்ந்து கொள்ளுங்கள்

பதிவுசெய்க
CSS ஐப் பயன்படுத்தி Animation செய்வது எப்படி?
Laveena Rajendran | Developer & Writter

Animationகளுக்கு CSS ஐப் பயன்படுத்துவதற்கான முக்கியமான காரணங்களில் ஒன்று என்னவென்றால், இன்றைய browser ஒரு தசாப்தத்திற்கு முன்னர் எங்களிடம் இருந்ததை விட சிறந்தது. இது ஒரு கட்டத்தில் சிக்கலானதாகக் கருதப்பட்ட விஷயங்களை எளிதாக அடைய developerகளுக்கு browser இன் தரப்பிலிருந்து மகத்தான ஆதரவையும் வளங்களையும் வழங்குகிறது.

CSS அடிப்படை Animationகளை உருவாக்க முடியும் என்பது சிறந்த user அனுபவத்தை வழங்கும் websiteகளை உருவாக்க விரும்பும் எந்தவொரு amateur இற்கும் தொடக்க புள்ளியாகவும் பார்க்க முடியும்.
 

@keyframes

CSS Animationகளின் முக்கிய அங்கம் @keyframes. Animation உருவாக்கப்படும் CSS விதி இது ஆகும்.
CSS Animationகளைச் செயல்படுத்த, @keyframes முதலில் வரையறுக்கப்பட்டு பின்னர் ஒரு selector உடன் பிணைக்கப்பட்டுள்ளது.
நீங்கள் படிப்படியாக சிவப்பு நிறத்தில் இருந்து நீல நிறத்தை மாற்றும் அனிமேஷனை உருவாக்க விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம். இந்த அனிமேஷனை நாம் பல்வேறு நிலைகளாகப் பிரிக்கலாம், சிவப்பு, ஆரஞ்சு, மஞ்சள், பச்சை மற்றும் நீல நிறங்கள் போன்ற வண்ண மாற்றங்கள்.

                                                                        

@keyframes பின்வரும் பண்புகளைக் கொண்டுள்ளது:

பெயர்: எங்கள் விருப்பப்படி.
நிலைகள்: 0% -100%.
CSS styles: ஒவ்வொரு கட்டத்திற்கும் நீங்கள் விண்ணப்பிக்க விரும்பும் styles

 

The Animation

Animation property ஒரு CSS selectorக்குள் @keyframes ஐ அழைக்க பயன்படுகிறது. அனிமேஷன் பல பண்புகளைக் கொண்டிருக்கலாம்:

  • animation-name: @keyframes name (remember we chose fade).
  • animation-duration : the timeframe length.
  • animation-timing-function : sets the animation speed.
  • animation-delay : the delay before our animation will start.
  • animation-iteration-count : how many times it will iterate.
  • animation-direction : gives you the ability to change the loop direction.
  • animation-fill-mode : specifies which styles will be applied to the element when our animation is finished.

இதைப் பயன்படுத்தி, நமது code இப்போது இப்படி இருக்கும்:
 

.element {
  animation-name: fade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

அல்லது

.element {
  animation: fade 2s 1s infinite linear alternate;
}

 

Vendor Prefixes 

நாம் CSS animationகளைச் சேர்க்கும்போது இது மிகவும் முக்கியமானது. rich user experienceஐ வழங்கும் animation மற்றும் பிற விஷயங்கள் நிறைந்த websiteஐ நீங்கள் வடிவமைத்துள்ளீர்கள் என்றால். நீங்கள் அதை Chrome மற்றும் Voila இல் திறக்கிறீர்கள்! இது சரியாக வேலை செய்கிறது! ஆனால் நீங்கள் அதை Firefox இல் திறக்கும்போது, அனிமேஷன்கள் செயலிழந்தன.

இது நடப்பதைத் தவிர்க்க, ஒரு developer vendor prefixesகளைச் சேர்க்க வேண்டும்.

பயன்படுத்தப்படும் standard prefixes

  • Chrome & Safari: ~webkit~
  • Firefox: ~moz~
  • Opera: ~o~
  • Internet Explorer: ~ms~

நமது code இப்போது இப்படி இருக்கும்:


.element {
    -webkit-animation: fade 4s 1s infinite linear alternate;
    -moz-animation: fade 4s 1s infinite linear alternate;
    -ms-animation: fade 4s 1s infinite linear alternate;
    -o-animation: fade 4s 1s infinite linear alternate;
    animation: fade 4s 1s infinite linear alternate; 

நாம் @keyframes ஐச் சேர்த்தால்,

@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@keyframes fade { /* your style */ }

 

Multiple Animations

பல அனிமேஷன்களைச் சேர்க்க, commaஐ பயன்படுத்தலாம்!

@keyframes fade {
  to {
    opacity: 0;
  }
}
@keyframes rotate {
  to {
    transform: rotate(180deg);
  }
}
.element {
  animation: fade 2s 1s infinite linear alternate,
             rotate 2s 1s infinite linear alternate;
}
There are no comments yet.
Authentication required

You must log in to post a comment.

Log in