CSS Animation(css அனிமேசன்)
CSS Animation பண்பானது ஒரு இணைய பக்கத்தில் அனிமேசன் செய்ய பயன்படுகின்றது..
ஜாவாஸ்கிரிப்ட் அல்லது ஃப்ளாஷ் பதிலாக நாம் css கொண்டே அனிமேசன் செய்யலாம்..
CSS3
@keyframes Rule என்றால்
என்ன?
CSS3
@keyframes ஆனது css
அனிமேசன் தொடரை நிர்வாகிக்கின்றது.
அனிமேசன்
என்றால் என்ன?
அனிமேசன்
என்பது ஒரு எலெமெண்டின் பண்புகளை ஒன்றிலிருந்து மற்றதற்கு படிபடியாக மாற்றப்
பயன்படுகின்றது.ஒரு அனிமேசனில் நாம் விரும்பிய பண்புகளை சேர்த்துக்
கொள்ளலாம்.மாற்றங்களை நாம் சதவீத கணக்கில் கொடுக்கலாம்.0% என்பது ஒரு அனிமேசனின்
தொடக்க்த்தையும் 100% என்பது ஒரு அனிமேசனின் முடிவினையும் குறிக்கின்றது..
Css அனிமேசன் எவ்வாறு செயல்படுகின்றது?
ஒரு அனிமேசன் ஆனது @keyframe விதியில் உருவாக்கும் பொழுது ஒரு
செலக்டருடன் பைண்ட் செய்யப்பட வேண்டும்.ஒரு அனிமசேன் ஆனது குறைந்த பட்சம் கீழ்
காணும் இரண்டு பண்புகளை கொண்டிருத்தல் வேண்டும்.
1. அனிமேசனின்
பெயர்.
2. அனிமேசன்
நடக்கும் மொத்த நேரம்
CSS
animation பண்புகள்
|
பண்புகள்
|
Description
|
|
@keyframes
|
இது
அனிமேசனை ஸ்பெசிபை செய்ய பயன்படுகின்றது.
|
|
Animation
|
இது
ஒன்றிரண்டு பண்புகளைத் தவிர்த்து மற்ற எல்லா பண்புகளையும் மதிப்பிருத்தப் பயன்
படுகின்றது
|
|
animation-delay
|
இது
அனிமசன் எப்பொழுது தொடங்க வேண்டும் என்பதனைக் குறிக்கப்பயன்படுகின்றது.
|
|
animation-direction
|
இது
அனிமேசன் ஆனது எந்த திசையில் செயல்படுத்த வேண்டும் என்பதை கூற பயன்படுகின்றது.
|
|
animation-duration
|
இது
அனிமேசன் மொத்தம் எவ்வளவு நேரம் நடை பெற வேண்டும் என்பதைக் குறிப்பிட
பயன்டுகின்றது.
|
|
animation-fill-mode
|
இது
அனிமேசன் நடைபெறா பொழுது ஒருஎலெமெண்டின் பண்புகள் என்ன என்பதைக் குறிப்பிட
பயன்படுகின்றது.
|
|
animation-iteration-count
|
இது
அனிமேசன் மொத்தம் எத்தனை தடவை நடக்க
வேண்டும் என்பதைக் குறிப்பிடப் பயன்படுகின்றது.
|
|
animation-play-state
|
இது
அனிமேசன் எந்த நிலையில் இருக்கின்றது என்பதைகுறிப்பிட பயன்படுகின்றது.
உதராணத்திற்கு ஒரு அனிமேசன் ஆனது இயங்கு நிலையில் உள்ளதா அல்லது தாற்காலிகமாக
நிறுத்தப்பட்டுள்ளதா என்பதை குறிப்பிட பயன்படுகின்றது.
|
|
animation-name
|
இது
அனிமேசனின் பெயரைக் குறிப்பிடப் பயன்படுகின்றது.
|
|
animation-timing-
function
|
இது
அனிமேசனின் வேகத்தைக் குறிப்பிடப் பயன்படுகின்றது
|
Css
அனிமேசன் உதாரணம் ஒரு எலெமெண்டின்
பின்னனி வண்ணத்தை மாற்றுவது எப்படி?
பின்
வரும் நிரலில் ஒரு எலெமெண்டின் பின்னனி வண்ணத்தை சிவப்பு நிறத்திலிருந்து கருப்பு
நிறத்திற்கு எவ்வாறு மாற்றுவது என்பதை குறிப்பிட பயன்படுகின்றது.
சான்று
நிரல்-1
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: green;}
}
/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: green;}
}
</style>
</head>
<body>
<p><b>Note:</b>
The IE 9 and earlier versions don't support CSS3 animation property.
</p>
<div></div>
</body>
</html>
வெளியீடு:
CSS
அனிமேசன் உதாரணம்.
பின்
வரும் உதாரணம் ஒரு அனிமேசனை சதவீத
கணக்கீடு கொண்டு எவ்வாறு மாற்றுவது என்பதைக் குறிப்பிடப் பயன்படுகின்றது.
சான்று
நிரல்-2
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background:red; left:0px;
top:0px;}
25% {background:yellow;
left:300px; top:0px;}
50% {background:blue; left:200px;
top:300px;}
75% {background:green; left:0px;
top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background:red; left:0px;
top:0px;}
25% {background:yellow;
left:300px; top:0px;}
50% {background:blue; left:300px;
top:200px;}
75% {background:green; left:0px;
top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b>
The Internet Explorer 9 and its earlier versions don't support this
example.</p>
<div></div>
</body>
</html>
வெளியீடு
CSS Gradient
Css கிரேடியண்ட் கொண்டு ஒரு எலெமெண்டின் நிறத்தை ஒரு நிறத்திலிருந்து மற்ற நிறத்திற்கு என்பது பற்றியதாகும்.
Css கிரேடியண்டை ஏன் உபயோகப்படுத்த வேண்டும்?.
Ø நம்மிடம் ஒரு இமேஜ் இல்லாத் பொழுது
Ø டவுன்லோட் நேரம் மற்றும் பாண்ட்வித்
உபயோகத்தை குறைப்பதற்கு.
Ø இது ஷூம் செய்யப்பட்டாலும் அதன் தோற்றம்
பாதிக்கப்படாது.
CSS
கிரேடியண்டின் இரண்டு வகைகள்
- Linear gradients(லீனியர் கிரடியண்ட்)
- Radial gradients(ரேடியல் கிரேடியண்ட்)
1) CSS லீனியர் கிரேடியண்ட்
லீனியர் கிரேடியண்டில் நிறமானது மேல்/கீழ்/வலது/இடது/கோணல் திசையில் மாற்றம் நடை பெறுகின்றது என்பதை குறிப்பிட பயன்படுகின்றது.
(i) CSS Linear Gradient: (மேலிருந்து கீழாக)
சான்று நிரல்-3
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
</html>
வெளியீடு:
(ii) CSS Linear Gradient: (இடமிருந்து வலமாக)
உம் கிரேடியண்டிடை பின் வரும் சான்று நிரலானது இடமிருந்து வலமாக மாறும் லீனியர் கிரேடியண்டை எவ்வாறு செயல்படுத்துவது என்பதைக் குறிப்பிட பயன்படுகின்றது..சான்று நிரல்-4
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
</html>
Output:
லீனியர் கிரேடியண்ட் ஆனது இடமாக சிவப்பு நிறத்தில் தொடங்கி வலது புறத்தில் பச்சை நிறமாக நடை பெறுகின்றது.
(iii) CSS Linear Gradient: (Diagonal)
பின் வரும் நிரலில் ஒரு லீனியர் கிரேடியண்ட் ஆனது டயகனலாக எவ்வாறு மாறுகின்றது என்பது குறிப்பிடப்படுகின்றது..சான்று நிரல்-5
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
வெளியீடு:
2) CSS ரேடியல் கிரடியண்ட்
இதற்கு குறைந்த பட்சம் இரண்டு நிறமாவது தேவைப்படுகின்றது. இதில் கிரேடியண்ட் ஆனது ரேடியலாக செயற்படுத்தப் படுகின்றது- background: radial-gradient(shape size at position, start-color, ..., last-color);
(i) CSS Radial Gradient: (Evenly Spaced Color Stops)
இது ஒரே விகிதத்தில் அளவிடப்பட்ட இரண்டு நிறங்களை கொண்டு ரேடியலாக எவ்வாறு செயற்படுத்துவது என்பதை குறிப்பிடப் பயன்படுகின்றது.சான்று நிரல்-6
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(blue, green, red); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(blue, green, red); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(blue, green, red); /* For Firefox 3.6 to 15 */
background: radial-gradient(blue, green, red); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
</body>
</html>
வெளியீடு:
(ii) Radial Gradient: (Differently Spaced Color Stops) வித்தியாசமான விகிதத்தில் நடைபெறும் ரேடியல் கிரேடியண்ட்
சான்று நிரல்-7
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(blue 5%, green 15%, red 60%); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(blue 5%, green 15%, red 60%); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(blue 5%, green 15%, red 60%); /* For Firefox 3.6 to 15 */
background: radial-gradient(blue 5%, green 15%, red 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
</body>
</html>
வெளியீடு:
நன்றி
-முத்து
கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment