-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_animation-text-change.sass
37 lines (31 loc) · 1.11 KB
/
_animation-text-change.sass
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
@keyframes hide-text
to
font-size: 0
@keyframes dw-null
=animation-text-change($start, $selector, $font-size, $changes)
// $font-size: 1rem
$animation-names: 'dw-null'
$animation-delays: '0s'
$animation-durations: '0s'
@each $delay, $duration, $text in $changes
$name: 'dw-' + round($start) + '-' + random(100000000)
$animation-names: $animation-names + ', ' + $name
$animation-delays: $animation-delays + ', ' + $delay
$animation-durations: $animation-durations + ', ' + $duration
@keyframes #{$name}
to
content: $text
font-size: #{$font-size}
#{$selector}
animation-name: hide-text
animation-delay: #{$start}s
animation-duration: 0.01s
animation-fill-mode: forwards
&::after
content: ''
vertical-align: bottom
animation-name: #{$animation-names}
animation-delay: #{$animation-delays}
animation-duration: #{$animation-durations}
animation-fill-mode: forwards
animation-direction: alternate