vertical-doors Screen-Change-Animation
Displays the next screens by something like doors that close from top and bottom and meet in the middle
with the vertical-doors screen-change-animation.
Usage
Use this animation like this:
.myScreen {
screen-change-animation: vertical-doors;
}
| CSS Attribute | Default | Values | Explanation | Since |
|---|---|---|---|---|
| vertical-doors-screen-change-animation-door | both | both, top, bottom | The door which should be operated during the animation. | 2.3 |
| Further CSS Attribute | Default | Values | Explanation | Since |
| screen-change-animation-direction | - | forward, backward | The direction of the animation - by default the direction depends on the circumstances - when entering a screen the direction is forward, when leaving it is backward. | 2.3 |
| screen-change-animation-duration | 400ms | time | The duration of the animation. | 2.3 |
| screen-change-animation-function-backward | exponential-out | ease, linear, ease-in, ease-out, exponential-in, exponential-out | The function for calculating animation range values for a forward running animation. | 2.3 |
| screen-change-animation-function-forward | exponential-in | ease, linear, ease-in, ease-out, exponential-in, exponential-out | The function for calculating animation range values for a forward running animation. | 2.3 |