អន្តរភាព

សិក្សា​អំពី​អន្តរភាព គឺ​សិក្សា​អំពី​លក្ខណៈ​ដែល​កើត​មាន​ឡើង​នៅ​ចន្លោះ​ពេល​ដែល​ធាតុ​មួយ​មាន​ការផ្លាស់​ប្ដូរ​អ្វី​ម្យ៉ាង ។

#ex2 {
    transition: all .5s;
}
#ex1:hover, #ex2:hover {
    background: pink;
    font-size: 1.4em;
}
យក mouse រំលង​លើ​ពាក្យ​ខាង​ក្រោម<hr>
<div id="ex1">មុន​សិក្សា​អំពី​អន្តរភាព</div>
<div id="ex2">បន្ទាប់​ពី​សិក្សា​អំពី​អន្តរភាព</div>

រយៈពេល​នៃ​អន្តរភាព

ដើម្បី​កំណត់​រយៈ​ពេល​នៃ​អន្តរភាព ត្រូវ​ប្រើ transition-duration ។ តម្លៃ​របស់​វា គឺ​វិនាទី ឬ​មីលីវិនាទី ។

.a {
    background: black;
    color: white;
    padding: 0 5px;
    transition-duration: 1s;
}
.a:hover {
    background: pink;
    color: black;
    padding: 0 25px;
}
<p><span class="a">KHODE</span> គឺ​ជា​កម្មវិធី​សិក្សា​កូដ​គេហទំព័រ ឥត​គិត​ថ្លៃ តាម​ប្រព័ន្ធ​អ៊ីនធើណិត ។</p>

គ្រប់ property ដែល​ទាក់ទង​ទៅ​នឹង​អន្តរភាព ត្រូវ​កំណត់ transition-duration នេះ ទើប property ផ្សេងៗ​ដំណើរការ ។

property ដែល​ត្រូវ​ទទួល​ប្រតិកម្ម

ដើម្បី​កំណត់​ឲ្យ property ណា​មួយ ឬ​ទាំងអស់​ឲ្យ​ទទួល​ប្រតិកម្ម​នេះ គឺ​ត្រូវ​ប្រើ transition-property ។ តម្លៃ​របស់​វា​គឺ​ជា​ឈ្មោះ property ណាមួយ ដែល​ចង់​ឲ្យ​ទទួល​ប្រតិកម្ម ឬ​កំណត់​ពាក្យ all ដើម្បី​ឲ្យ property ទាំងអស់​មាន​ប្រតិកម្ម ។

.a {
    background: black;
    color: white;
    transition-property: color;
    transition-duration: 3s;
}
.a:hover {
    background: pink;
    color: black;
}
<p><span class="a">KHODE</span> គឺ​ជា​កម្មវិធី​សិក្សា​កូដ​គេហទំព័រ ឥត​គិត​ថ្លៃ តាម​ប្រព័ន្ធ​អ៊ីនធើណិត ។</p>

ពន្យារ​ពេល

ដើម្បី​ពន្យារ​ពេល​ដំណើរការ​អន្តរភាព គឺ​ត្រូវ​ប្រើ transition-delay ។ តម្លៃ​របស់​វា​គឺ​វិនាទី ឬ​មីលីវិនាទី ។

.a {
    background: black;
    color: white;
    transition-property: background;
    transition-duration: 1s;
    transition-delay: .5s;
}
.a:hover {
    background: pink;
    color: black;
}
<p><span class="a">KHODE</span> គឺ​ជា​កម្មវិធី​សិក្សា​កូដ​គេហទំព័រ ឥត​គិត​ថ្លៃ តាម​ប្រព័ន្ធ​អ៊ីនធើណិត ។</p>

ទម្រង់​ល្បឿន

ដើម្បី​កំណត់​ទម្រង់​ល្បឿន គឺ​ត្រូវ​ប្រើ transition-timing-function ។ សិក្សា​អំពី​ដំណើរការ និង​តម្លៃ​របស់​វា​មួយ​ចំនួន​ខាង​ក្រោម ។

div {
    background: black;
    color: white;
    width: 200px;
    transition-property: width;
    transition-duration: 1s;
}
div:hover {
    width: 400px;
}
#ease {
    transition-timing-function: ease;
}
#linear {
    transition-timing-function: linear;
}
#ease-in {
    transition-timing-function: ease-in;
}
#ease-out {
    transition-timing-function: ease-out;
}
#ease-in-out {
    transition-timing-function: ease-in-out;
}
<div id="ease">ease</div>
<div id="linear">linear</div>
<div id="ease-in">ease-in</div>
<div id="ease-out">ease-out</div>
<div id="ease-in-out">ease-in-out</div>

កំណត់​ក្នុង property តែ​មួយ

ដើម្បី​កំណត់ property ទាំង​ឡាយ​ដែល​ទាក់​ទង​នឹង​អន្តរភាព គឺ​ប្រើ transition ។ >តម្លៃ​របស់​វា គឺ​ត្រូវ​សរសេរ​តម្លៃ​នៃ property ដែល​ទាក់ទង​នឹង​អន្តរភាព ។

p {
    background: black;
    color: white;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    transition: width 1s linear .5s, background 5s ease-out;
}
p:hover {
    background: pink;
    color: black;
    width: 400px;
}
<p>KHODE គឺ​ជា​កម្មវិធី​សិក្សា​កូដ​គេហទំព័រ ឥត​គិត​ថ្លៃ តាម​ប្រព័ន្ធ​អ៊ីនធើណិត ។</p>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត