c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the alien jump

Browse source
This commit is contained in:
Henri Bergius 2017-12-05 22:38:17 +01:00
parent fb91152440
commit 29bd1097c6
1 changed files with 37 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
alien-alarm/index.html
View file

@ -6,11 +6,7 @@
<link rel="stylesheet" href="../theme/c-base.css"> <link rel="stylesheet" href="../theme/c-base.css">
<style> <style>
body { body {
-webkit-animation-name: color; animation: color 0.6s infinite linear alternate;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
} }
h1 { h1 {
text-align: center; text-align: center;
@ -22,24 +18,18 @@
color: black; color: black;
text-transform: lowercase; text-transform: lowercase;
line-height: 20vmin; line-height: 20vmin;
-webkit-animation-name: size; animation: size 0.6s infinite ease-in-out alternate;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
} }
img { img {
position: absolute; position: absolute;
left: 35vw; left: 35vw;
top: 50vh; top: 50vh;
width: 30vw; width: 30vw;
-webkit-animation-name: move; animation: moveleftright 3s infinite linear alternate,
-webkit-animation-duration: 3s; moveupdown 2s infinite ease-in-out alternate,
-webkit-animation-iteration-count:infinite; flip 2s infinite ease-in-out alternate;
-webkit-animation-timing-function:linear;
-webkit-animation-direction: alternate;
} }
@-webkit-keyframes move { @keyframes moveleftright {
from { from {
left: 10vw; left: 10vw;
} }
@ -47,15 +37,40 @@
left: 60vw; left: 60vw;
} }
} }
@-webkit-keyframes color { @keyframes moveupdown {
from { 0%, 30% {
background-color: hsl(0, 98%, 46%); top: 50vh;
transform: scaleY(1)
} }
to { 40% {
background-color: hsl(35, 98%, 46%); top: 25vh;
transform: scaleY(-1)
}
50%, 100% {
top: 50vh;
transform: scaleY(1)
} }
} }
@-webkit-keyframes size { @keyframes flip {
0%, 35% {
transform: scaleY(1)
}
40% {
transform: scaleY(-1)
}
45%, 100% {
transform: scaleY(1)
}
}
@keyframes color {
0%, 20% {
background-color: hsl(35, 98%, 46%);
}
80%, 100% {
background-color: hsl(0, 98%, 46%);
}
}
@keyframes size {
from { from {
font-size: 10vmin; font-size: 10vmin;
} }