summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/styles/animation.less
blob: 014b33a454f6cd58a2fef26e669e624526f3cd34 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.animation_flex (@value){
    -webkit-animation: @value;
    -moz-animation:    @value;
    -o-animation:      @value;
    -ms-transition:    @value;
    animation:         @value;
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
    -webkit-animation:  @name @duration @delay @ease;
    -moz-animation:     @name @duration @delay @ease;
    -o-animation:       @name @duration @delay @ease;
    -ms-animation:      @name @duration @delay @ease;
    animation:          @name @duration @delay @ease;
}

/* ============ flash ============ */
.flash-frames () {
    0% { opacity: 1; }
    20% { opacity: 1; }
    50% { opacity: 0; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}
@-webkit-keyframes flash {.flash-frames;}     /* Safari, Chrome and Opera > 12.1 */
@-moz-keyframes flash {.flash-frames;}        /* Firefox < 16 */
@-o-keyframes flash {.flash-frames;}          /* Opera < 12.1 */
@-ms-keyframes flash {.flash-frames;}         /* Internet Explorer */
@keyframes flash {.flash-frames;}

/* ============ fadein ============ */
.fadein-frames () {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {.fadein-frames;}     /* Safari, Chrome and Opera > 12.1 */
@-moz-keyframes fadein {.fadein-frames;}        /* Firefox < 16 */
@-o-keyframes fadein {.fadein-frames;}          /* Opera < 12.1 */
@-ms-keyframes fadein {.fadein-frames;}         /* Internet Explorer */
@keyframes fadein {.fadein-frames;}

/* ============ fadeout ============ */
.fadeout-frames () {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@-webkit-keyframes fadeout {.fadeout-frames;}     /* Safari, Chrome and Opera > 12.1 */
@-moz-keyframes fadeout {.fadeout-frames;}        /* Firefox < 16 */
@-o-keyframes fadeout {.fadeout-frames;}          /* Opera < 12.1 */
@-ms-keyframes fadeout {.fadeout-frames;}         /* Internet Explorer */
@keyframes fadeout {.fadeout-frames;}