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