-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
_animation.scss
48 lines (41 loc) · 1.18 KB
/
_animation.scss
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
//
// Copyright IBM Corp. 2016, 2023
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
@use '../../motion';
@use '../../config' as *;
@mixin spin {
// Animate the container
animation-duration: 690ms;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: #{$prefix}--rotate;
animation-timing-function: linear;
// Animate the stroke
svg circle {
animation-duration: 10ms;
animation-name: #{$prefix}--init-stroke;
animation-timing-function: motion.$standard-easing;
@media screen and (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
@mixin stop {
// Animate the container
animation: #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
#{$prefix}--rotate-end-p2 700ms motion.$ease-out 700ms forwards;
// Animate the stroke
svg circle {
animation-delay: 700ms;
animation-duration: 700ms;
animation-fill-mode: forwards;
animation-name: #{$prefix}--stroke-end;
animation-timing-function: motion.$ease-out;
@media screen and (prefers-reduced-motion: reduce) {
animation: none;
}
}
}