CSS3 Transitions គឺជាការបន្ថែមនូវ effect នៅពេលដែលយើងធ្វើការផ្លាស់ប្តូរពី style មួយទៅ style មួយទៀត ដោយយើងមិនចាំបាច់ប្រើ ចលនានៅក្នុង flash ឬ នៅក្នុង JavaScript ឡើយ។
Browser ដែលអាចប្រើ
CSS3 Transitions នេះគឺដំណើរការជាមួយនឹង Internet Explorer 10, Firefox, Chrome, Opera និង Safari ប៉ុន្តែ Safari តម្រូវការប្រើ prefix –webkit-។
សំគាល់: Internet Explorer 9 និង ជំនាន់មុនៗ មិនអាចដំណើរការ property នេះទេ។ ចំនែកឯ Chrome 25 និង ជំនាន់មុនៗ តម្រូវការប្រើ prefix –webkit- ដូចនឹង Safari ដែរ។
របៀបប្រើ
CSS3 Transitions គឺជា effect ដែលបង្ហាញពីការផ្លាស់ប្តូររបស់ ធាតុ ពី style មួយទៅ style មួយទៀត ដូចនេះ ដើម្បីប្រើវា គឺយើងត្រូវ កំណត់ style ទាំងពីរនេះ គឺ style ទី១ និង style ទី២។
ឧទារហណ៍
ដូចក្នុងឧទាហរណ៍ខាងក្រោមនេះ គឺយើងនឹង បង្កើត effect នៃការប្តូរ ពណ៌ផ្ទៃនៅពេលយក mouse ដាក់ពីលើ នៃ ប៊ូតុងមួយដោយ ប្រើ CSS3 Transitions ដោយយើងគិតថា ពណ៌ផ្ទៃធម្មតាជា style ទី១ និង ពណ៌ផ្ទៃនៅពេលយក mouse ដាក់ពីលើជា style ទី២។
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
.jpg)
0 comments:
Post a Comment