transition-property
åºçº¿
广æ³å¯ç¨
èª 2015å¹´9æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
transition-property æå®åºç¨è¿æ¸¡å±æ§çåç§°ã
å°è¯ä¸ä¸
transition-property: margin-right;
transition-property: margin-right, color;
transition-property: all;
transition-property: none;
<section id="default-example">
<div id="example-element">Hover to see<br />the transition.</div>
</section>
#example-element {
background-color: #e4f0f5;
color: #000;
padding: 1rem;
border-radius: 0.5rem;
font: 1em monospace;
width: 100%;
transition: margin-right 2s;
}
#default-example:hover > #example-element {
background-color: #909;
color: #fff;
margin-right: 40%;
}
妿æå®ç®å屿§ï¼æ¯å¦ backgroundï¼ï¼é£ä¹å
¶å®æ´ç䏿æå¯ä»¥å¨ç»ç屿§é½ä¼è¢«åºç¨è¿æ¸¡ã
è¯æ³
css
/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;
transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property:
all,
-moz-specific,
sliding;
/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;
åå¼
å½¢å¼å®ä¹
| åå§å¼ | ææ |
|---|---|
| éç¨å ç´ | all elements, ::before and ::after pseudo-elements |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | Not animatable |
å½¢å¼è¯æ³
transition-property =
none |
<single-transition-property>#
<single-transition-property> =
all |
<custom-ident>
示ä¾
å¨ CSS è¿æ¸¡ä¸æå 个示ä¾å¯ä»¥åèã
è§è
| è§è |
|---|
| CSS Transitions Module Level 1 > # transition-property-property > |