59 lines
1.3 KiB
SCSS
59 lines
1.3 KiB
SCSS
@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;
|
|
}
|