James木屋

James木屋

THIS PAGE IS WORK IN PROGRESS

Image Float Animation

蕗的苔子

Image Tilt Animation

Image Hop Tilt Animation

<style>
 @keyframes tilter {
        0% {
            transform: rotate(-10deg);
        }
            10% {
            transform: rotate(-8deg);
        }
        25% {
            transform: rotate(0deg);
        }
        40% {
            transform: rotate(8deg);
        }
        50% {
            transform: rotate(10deg);
        }
            60% {
            transform: rotate(8deg);
        }
        90% {
            transform: rotate(-8deg);
        }
        100% {
            transform: rotate(-10deg);
        }
    }
      #Tilter.moveAnimation {
        animation: tilter 1.3s infinite linear;
    }
    
 #hop
{
  -webkit-animation: mover 0.3s infinite linear;
  animation: mover 0.3s infinite linear;
}
@-webkit-keyframes mover {
  0% { transform: translateY(0); }
  50% { transform: translateY(20px); }
  100% { transform: translateY(0); }
}
@keyframes mover {
  0% { transform: translateY(0); }
  50% { transform: translateY(20px); }
  100% { transform: translateY(0); }
}
</style>
<div id="hop" style="left: 25%; transform: translateX(-50%); transform: translateY(-50%);margin-left: 30px;width: 300px;bottom: 380px;">
<img src="https://jamesland.org/Code_Templates/Test/ずんだもん1.png" id="Tilter" class="moveAnimation" style="width: 260px;">
</div>

https://jamesland.neocities.org/

Include My Badges On Your Site!

James Pangartica

James Pangartica

James Pangartica

Click on any badge to copy code!

You are Visiter #:

Follow site updates, leave suggestions and more!