portfolio/curves.css at main · Ruby1405/portfolio · 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
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div {
    width: 200px;
    height: 400px;
    background-color: blueviolet;
    margin-bottom: 50px;
    animation-name: scrollWatcher;
    animation-timing-function: linear;
    /* animation-duration: 10s; */
    animation-timeline: scroll(y);
}

@keyframes scrollWatcher {
    0% {
        /* transform: translate3d(0, 0); */
        /* transform: rotate3d(1, 0, 0, 0deg); */
        transform: translate3d(500px,-500px,0) rotate(180deg);
    }
    10% {
        transform: translate3d(500px,500px,0) rotate(180deg);
    }
    15% {
        transform: translate3d(250, 750px, 0) rotate(270deg);
    }
    20% {
        transform: translate3d(0, 500px, 0) rotate(360deg);
    }
    80% {
        transform: translate3d(0, -500px, 0) rotate(360deg);
    }
    85% {
        transform: translate3d(-250, -750px, 0) rotate(270deg);
    }
    90% {
        transform: translate3d(-500px, -500px, 0) rotate(180deg);
    }
    100% {
        /* transform: translate3d(100px, 100px, 100px); */
        /* transform: rotate3d(1, 1, 0, 360deg); */
        transform: translate3d(-500px, 500px,0) rotate(180deg);
    }
}