n/vue-shovel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

even nicer walking animation

Browse source
This commit is contained in:
Norman Köhring 2023-02-13 22:42:05 +01:00
parent cd8bcbcc47
commit c486c12283
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/assets/field.css
View file

@ -78,10 +78,10 @@
transform-origin: top center;
}
#player.walking > .legs > div.right {
animation: dangle .4s ease infinite both;
animation: dingle .3s linear infinite alternate;
}
#player.walking > .legs > div.left {
animation: dangle .4s ease infinite reverse both;
animation: dangle .3s linear infinite alternate;
}
#player > .arms {
position: absolute;
@ -90,6 +90,10 @@
top: 48px;
left: 30px;
background-image: url(/Characters/Alien/alien_arm.png);
transform-origin: top center;
}
#player.walking > .arms {
animation: dangle .3s linear infinite alternate;
}
.block {
flex: 0 0 auto;
@ -110,7 +114,11 @@
flex-flow: row wrap;
}
@keyframes dangle {
@keyframes dingle {
from { transform: rotate(20deg); }
to { transform: rotate(-20deg); }
}
@keyframes dangle {
from { transform: rotate(-20deg); }
to { transform: rotate(20deg); }
}