shake it baby
This commit is contained in:
parent
71bb0d6f85
commit
425a815435
1 changed files with 66 additions and 0 deletions
|
@ -65,6 +65,21 @@ th {
|
|||
|
||||
h1 {
|
||||
text-align: center;
|
||||
display: block;
|
||||
position: relative;
|
||||
transform-origin: 50% 50%;
|
||||
animation-name: shake;
|
||||
animation-duration: 0.8s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-name: shake;
|
||||
-webkit-animation-duration: 0.8s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-name: shake;
|
||||
-moz-animation-duration: 0.8s;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-moz-animation-timing-function: linear;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
|
@ -84,3 +99,54 @@ input[type="submit"] {
|
|||
line-height: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {transform: translate(2px, 1px) rotate(0deg);
|
||||
color: black;}
|
||||
10% {transform: translate(-1px, -2px) rotate(-1deg);}
|
||||
20% {transform: translate(-3px, 0px) rotate(1deg);}
|
||||
30% {transform: translate(0px, 2px) rotate(0deg);}
|
||||
40% {transform: translate(1px, -1px) rotate(1deg);}
|
||||
50% {transform: translate(-1px, 1px) rotate(-1deg);
|
||||
color: red;}
|
||||
60% {transform: translate(-3px, -2px) rotate(0deg);}
|
||||
70% {transform: translate(2px, 1px) rotate(-1deg);}
|
||||
80% {transform: translate(-1px, -2px) rotate(1deg);}
|
||||
90% {transform: translate(2px, -1px) rotate(0deg);}
|
||||
100% {transform: translate(1px, -2px) rotate(-1deg);
|
||||
color: black;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes shake {
|
||||
0% {-webkit-transform: translate(2px, 1px) rotate(0deg);
|
||||
color: black;}
|
||||
10% {-webkit-transform: translate(-1px, -2px) rotate(-1deg);}
|
||||
20% {-webkit-transform: translate(-3px, 0px) rotate(1deg);}
|
||||
30% {-webkit-transform: translate(0px, 2px) rotate(0deg);}
|
||||
40% {-webkit-transform: translate(1px, -1px) rotate(1deg);}
|
||||
50% {-webkit-transform: translate(-1px, 1px) rotate(-1deg);
|
||||
color: red;}
|
||||
60% {-webkit-transform: translate(-3px, -2px) rotate(0deg);}
|
||||
70% {-webkit-transform: translate(2px, 1px) rotate(-1deg);}
|
||||
80% {-webkit-transform: translate(-1px, -2px) rotate(1deg);}
|
||||
90% {-webkit-transform: translate(2px, -1px) rotate(0deg);}
|
||||
100% {-webkit-transform: translate(1px, -2px) rotate(-1deg);
|
||||
color: black;}
|
||||
}
|
||||
|
||||
@-moz-keyframes shake {
|
||||
0% {-moz-transform: translate(2px, 1px) rotate(0deg);
|
||||
color: black;}
|
||||
10% {-moz-transform: translate(-1px, -2px) rotate(-1deg);}
|
||||
20% {-moz-transform: translate(-3px, 0px) rotate(1deg);}
|
||||
30% {-moz-transform: translate(0px, 2px) rotate(0deg);}
|
||||
40% {-moz-transform: translate(1px, -1px) rotate(1deg);}
|
||||
50% {-moz-transform: translate(-1px, 1px) rotate(-1deg);
|
||||
color: red;}
|
||||
60% {-moz-transform: translate(-3px, -2px) rotate(0deg);}
|
||||
70% {-moz-transform: translate(2px, 1px) rotate(-1deg);}
|
||||
80% {-moz-transform: translate(-1px, -2px) rotate(1deg);}
|
||||
90% {-moz-transform: translate(2px, -1px) rotate(0deg);
|
||||
color: black;}
|
||||
100% {-moz-transform: translate(1px, -2px) rotate(-1deg);}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue