small-projects/animations.css at main · cyphersept/small-projects · GitHub

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97);
}

.jump-shake {
    animation: jump-shake 0.5s ease-in-out;
}

.side-shake {
    animation: side-shake 0.4s ease-in-out;
}

.bob {
    animation: bob 2s cubic-bezier(.6, 0.1, .3, 1) 0.1s infinite;
    transform-origin: bottom;
}


@keyframes shake {
    0% { transform: translate(4px, 2px);}
    10% { transform: translate(-2px, -3px);}
    20% { transform: translate(5px, 4px);}
    30% { transform: translate(-3px, -4px);}
    40% { transform: translate(1px, -1px);}
    50% { transform: translate(-1px, 6px);}
    60% { transform: translate(-3px, 1px);}
    70% { transform: translate(3px, 3px);}
    80% { transform: translate(-4px, -4px);}
    90% { transform: translate(3px, 3px);}
    100% { transform: translate(-1px, -2px);}
}

/* https://unused-css.com/blog/css-shake-animation/ */
@keyframes jump-shake {
    0% { transform: translateX(0) }
    15%, 85% { transform: translateY(-9px) }
    35%, 55% { transform: translateY(-9px) rotate(17deg) }
    45%, 65% { transform: translateY(-9px) rotate(-17deg) }
    100% { transform: translateY(0) rotate(0) }
}

@keyframes side-shake {
    0%, 50%, 80% { transform: translateX(0) }
    20%, 60% { transform: translateX(0.2rem) }
    30%, 70% { transform: translateX(-0.2rem) }
    40% { transform: translateX(0.2rem) }
  }

@keyframes bob {
    0% { transform: translateY(0rem) scale(1, 1) }
    15% { transform: translateY(-0.5rem) scale(.95,1.05)}
    30% { transform: translateY(0.1rem) scale(1.1,0.9)}
    35% { transform: translateY(0rem) scale(1.05, 0.95) }
    40% { transform: translateY(0rem) scale(1, 1) }
}

.scroller {
    scrollbar-width: auto;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    overflow: auto;
}

/* Chrome, Edge, and Safari */
.scroller::-webkit-scrollbar {
    width: 12px;
    border-radius: 8px;
}

.scroller::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 8px;
}

.scroller::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 8px;
}

.scroller::-webkit-scrollbar-button {
    display: none;
}