gulp-starter

1
@mixin shine {
2
  @keyframes shine {
3
    0% {
4
      transform: translate(-100%, -25%) rotate(10deg);
5
    }
6
    20% {
7
      transform: translate(100%, -25%) rotate(10deg);
8
    }
9
    100% {
10
      transform: translate(100%, -25%) rotate(10deg);
11
    }
12
  }
13
}
14

15
@mixin updown {
16
  @keyframes updown {
17
    50% {
18
      transform: translateY(-20px);
19
    }
20

21
    100% {
22
      transform: translateY(0);
23
    }
24
  }
25
}
26

27
@mixin pulse {
28
  @keyframes pulse {
29
    from {
30
      transform: scale(1);
31
      transform-origin: center center;
32
      animation-timing-function: ease-out;
33
    }
34
    10% {
35
      transform: scale(0.91);
36
      animation-timing-function: ease-in;
37
    }
38
    17% {
39
      transform: scale(0.98);
40
      animation-timing-function: ease-out;
41
    }
42
    33% {
43
      transform: scale(0.87);
44
      animation-timing-function: ease-in;
45
    }
46
    45% {
47
      transform: scale(1);
48
      animation-timing-function: ease-out;
49
    }
50
  }
51
}
52

53
@mixin fillAnimation {
54
  @keyframes fillAnimation {
55
    0% {
56
      transform: scaleX(0);
57
    }
58
    100% {
59
      transform: scaleX(1);
60
    }
61
  }
62
}
63

64
@mixin pulse-btn-bg {
65
  @keyframes pulse-btn-bg {
66
    100% {
67
      box-shadow: 0 0 0 20px rgba(193, 244, 246, 0);
68
    }
69
  }
70
}
71