bouncing-ball/style.css at master · aBEIKU2k/bouncing-ball · 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
body{
    width:30vw;
    height: 30vw;
    overflow: hidden;
    background:white;

}

.ball{
    position: relative;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 250px;
	border: 10px solid blue;
	background-color:blue;
    top: 50%;
    left: 50%;
    animation: bounce 1s;
    animation-iteration-count:infinite;
}


@keyframes bounce {
	0% {top: 0;
		-webkit-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 100;
		-webkit-animation-timing-function: ease-out;
	}
	55% {
		-webkit-animation-timing-function: ease-in;}
	65% {
		-webkit-animation-timing-function: ease-out;}
	95% {
		top: 0;
		-webkit-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-webkit-animation-timing-function: ease-in;
	}
}