hulthe/singit2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Joakim Hulthe
2021-12-29 18:11:50 +01:00
commit 7298e8de73
17 changed files with 1707 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
static/styles/penguin.scss Normal file
View File

@ -0,0 +1,58 @@
@keyframes example {
0% {
transform: perspective(36em) rotateY(-90deg);
background-image: url(/images/penguin1.svg);
}
24.99% {
transform: perspective(36em) rotateY(90deg);
background-image: url(/images/penguin1.svg);
}
25% {
transform: perspective(36em) rotateY(90deg);
background-image: url(/images/penguin2.svg);
}
49.99% {
transform: perspective(36em) rotateY(270deg);
background-image: url(/images/penguin2.svg);
}
50% {
transform: perspective(36em) rotateY(270deg);
background-image: url(/images/penguin3.svg);
}
74.99% {
transform: perspective(36em) rotateY(450deg);
background-image: url(/images/penguin3.svg);
}
75% {
transform: perspective(36em) rotateY(450deg);
background-image: url(/images/penguin2.svg);
}
99.99% {
transform: perspective(36em) rotateY(630deg);
background-image: url(/images/penguin2.svg);
}
100% {
transform: perspective(36em) rotateY(630deg);
background-image: url(/images/penguin1.svg);
}
}
.penguin {
width: 12em;
height: 12em;
margin-top: 1em;
margin-bottom: 1em;
background-image: url(/images/penguin1.svg);
background-size: contain;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.1, 0.5, 0.9, 0.5);
}
.penguin_small {
width: 1.5em;
height: 1.5em;
margin-top: 0em;
margin-bottom: 0em;
}