top-shutter Screen-Change-Animation
Move in the next screen from the top with a shutter using the
top-shutter
screen-change-animation.
Usage
Use this animation like this:
.myScreen {
screen-change-animation: top-shutter;
}
| CSS Attribute | Default | Values | Explanation | Since |
|---|---|---|---|---|
| top-shutter-screen-change-animation-color | black | color | The color of the shutter. | 1.3 |
| top-shutter-screen-change-animation-speed | -1 | integer | The constant speed of the animation. By default the animation uses a somewhat quadratic de-acceleration. | 1.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 |