Source: dist/css/acc_uc.css, line 15790
4.2.3 Transition
Soften the harshness of the switch of the style by adding transitions to the change the speed of transition from decorators.
Example s
0
0 second transition
0
1
2
3
4
5
6
7
8
9
default
1
.1 second transition
0
1
2
3
4
5
6
7
8
9
default
2
.25 second transition
0
1
2
3
4
5
6
7
8
9
default
3
.3 second transition
0
1
2
3
4
5
6
7
8
9
default
4
.5 second transition
0
1
2
3
4
5
6
7
8
9
default
5
1 second transition
0
1
2
3
4
5
6
7
8
9
default
<div class="flex m_5 bg_primary m_5">
<div class="transition_[modifier class] h:bg_black-0 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
<div class="transition_[modifier class] h:bg_black-1 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
<div class="transition_[modifier class] h:bg_black-2 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
<div class="transition_[modifier class] h:bg_black-3 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
<div class="transition_[modifier class] h:bg_black-4 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
<div class="transition_[modifier class] h:bg_black-5 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
<div class="transition_[modifier class] h:bg_black-6 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
<div class="transition_[modifier class] h:bg_black-7 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
<div class="transition_[modifier class] h:bg_black-8 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
<div class="transition_[modifier class] h:bg_black-9 p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
<div class="transition_[modifier class] h:bg_black p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>