jquery/animation.css at master · marclll/jquery · 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
@keyframes rotationY{
	from { transform:rotateY(0deg);}
	to{transform:rotateY(360deg);}
}

@keyframes rotate{
	0%,100%{
		transform:translate(-300px,0px);
	}
	25% {
		transform:translate(0px,300px);
	}
	50%{
		transform:translate(300px,0px);
	}
	75%{
		transform:translate(0px,-300px);
	}
}

html,body{
	width:100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body{
	display:flex;
	align-items: center;
	justify-content:space-around;
}
div{
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width:150px;
	height:150px;
}

#first{
	animation-name: rotationY;
	animation-duration: 2s;
	animation-delay: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#second{background-color: #ff9900;}

#third{
	position: absolute;
	background-color: #89f442;
	animation-name: rotate;
	animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#fourth{background-color: #3b2063;}

#size{position: absolute; background-color: lightblue;}