ホバーアクションでシェイク!
Posted in: CSS3
h1:hover { -webkit-animation-name: shake; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes shake { 0% { -webkit-transform: rotate(1deg) translate(3px, 0); } 5% { -webkit-transform: rotate(-1deg) translate(-2px, 1px); } 10% { -webkit-transform: rotate(1deg) translate(3px, 0); } 15% { -webkit-transform: rotate(-1deg) translate(-3px, 3px); } 20% { -webkit-transform: rotate(1deg) translate(1px, 0); } 25% { -webkit-transform: rotate(-1deg) translate(-3px, 0); } 30% { -webkit-transform: rotate(1deg) translate(3px, 0); } 35% { -webkit-transform: rotate(-1deg) translate(-1px, -3px); } 40% { -webkit-transform: rotate(1deg) translate(3px, 0); } 45% { -webkit-transform: rotate(-1deg) translate(-3px, 3px); } 50% { -webkit-transform: rotate(1deg) translate(2px, 0); } 55% { -webkit-transform: rotate(-1deg) translate(-3px, 0); } 60% { -webkit-transform: rotate(1deg) translate(3px, 0); } 65% { -webkit-transform: rotate(-1deg) translate(-5px, 3px); } 70% { -webkit-transform: rotate(1deg) translate(3px, 0); } 75% { -webkit-transform: rotate(-1deg) translate(-2px, -3px); } 80% { -webkit-transform: rotate(1deg) translate(1px, 0); } 85% { -webkit-transform: rotate(-1deg) translate(-3px, 0); } 90% { -webkit-transform: rotate(1deg) translate(3px, 0); } 95% { -webkit-transform: rotate(-1deg) translate(0, 0); } 100% { -webkit-transform: rotate(1deg) translate(3px, 3px); } }