diff --git a/animate.css b/animate.css index 01e60bd..065b80a 100644 --- a/animate.css +++ b/animate.css @@ -3918,4 +3918,98 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI -ms-animation-duration: 0.25s; -o-animation-duration: 0.25s; animation-duration: 0.25s; -} \ No newline at end of file +} + +/* originally authored by Angelo Rohit - https://github.com/angelorohit */ + +@-webkit-keyframes vibrate { + 0% { -webkit-transform: skewX(9deg); } + 10% { -webkit-transform: skewX(-8deg); } + 20% { -webkit-transform: skewX(7deg); } + 30% { -webkit-transform: skewX(-6deg); } + 40% { -webkit-transform: skewX(5deg); } + 50% { -webkit-transform: skewX(-4deg); } + 60% { -webkit-transform: skewX(3deg); } + 70% { -webkit-transform: skewX(-2deg); } + 80% { -webkit-transform: skewX(1deg); } + 90% { -webkit-transform: skewX(0deg); } + 100% { -webkit-transform: skewX(0deg); } +} + +@-moz-keyframes vibrate { + 0% { -moz-transform: skewX(9deg); } + 10% { -moz-transform: skewX(-8deg); } + 20% { -moz-transform: skewX(7deg); } + 30% { -moz-transform: skewX(-6deg); } + 40% { -moz-transform: skewX(5deg); } + 50% { -moz-transform: skewX(-4deg); } + 60% { -moz-transform: skewX(3deg); } + 70% { -moz-transform: skewX(-2deg); } + 80% { -moz-transform: skewX(1deg); } + 90% { -moz-transform: skewX(0deg); } + 100% { -moz-transform: skewX(0deg); } +} + +@-ms-keyframes vibrate { + 0% { -ms-transform: skewX(9deg); } + 10% { -ms-transform: skewX(-8deg); } + 20% { -ms-transform: skewX(7deg); } + 30% { -ms-transform: skewX(-6deg); } + 40% { -ms-transform: skewX(5deg); } + 50% { -ms-transform: skewX(-4deg); } + 60% { -ms-transform: skewX(3deg); } + 70% { -ms-transform: skewX(-2deg); } + 80% { -ms-transform: skewX(1deg); } + 90% { -ms-transform: skewX(0deg); } + 100% { -ms-transform: skewX(0deg); } +} + +@-o-keyframes vibrate { + 0% { -o-transform: skewX(9deg); } + 10% { -o-transform: skewX(-8deg); } + 20% { -o-transform: skewX(7deg); } + 30% { -o-transform: skewX(-6deg); } + 40% { -o-transform: skewX(5deg); } + 50% { -o-transform: skewX(-4deg); } + 60% { -o-transform: skewX(3deg); } + 70% { -o-transform: skewX(-2deg); } + 80% { -o-transform: skewX(1deg); } + 90% { -o-transform: skewX(0deg); } + 100% { -o-transform: skewX(0deg); } +} + +@keyframes vibrate { + 0% { transform: skewX(9deg); } + 10% { transform: skewX(-8deg); } + 20% { transform: skewX(7deg); } + 30% { transform: skewX(-6deg); } + 40% { transform: skewX(5deg); } + 50% { transform: skewX(-4deg); } + 60% { transform: skewX(3deg); } + 70% { transform: skewX(-2deg); } + 80% { transform: skewX(1deg); } + 90% { transform: skewX(0deg); } + 100% { transform: skewX(0deg); } +} + +.vibrate { + -webkit-animation-name: vibrate; + -moz-animation-name: vibrate; + -ms-animation-name: vibrate; + -o-animation-name: vibrate; + animation-name: vibrate; + + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; + -ms-animation-timing-function: ease-in; + -o-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +.animated.vibrate { + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -ms-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; +} diff --git a/source/vibrate.css b/source/vibrate.css new file mode 100644 index 0000000..dc2ec4b --- /dev/null +++ b/source/vibrate.css @@ -0,0 +1,83 @@ +@-webkit-keyframes vibrate { + 0% { -webkit-transform: skewX(9deg); } + 10% { -webkit-transform: skewX(-8deg); } + 20% { -webkit-transform: skewX(7deg); } + 30% { -webkit-transform: skewX(-6deg); } + 40% { -webkit-transform: skewX(5deg); } + 50% { -webkit-transform: skewX(-4deg); } + 60% { -webkit-transform: skewX(3deg); } + 70% { -webkit-transform: skewX(-2deg); } + 80% { -webkit-transform: skewX(1deg); } + 90% { -webkit-transform: skewX(0deg); } + 100% { -webkit-transform: skewX(0deg); } +} + +@-moz-keyframes vibrate { + 0% { -moz-transform: skewX(9deg); } + 10% { -moz-transform: skewX(-8deg); } + 20% { -moz-transform: skewX(7deg); } + 30% { -moz-transform: skewX(-6deg); } + 40% { -moz-transform: skewX(5deg); } + 50% { -moz-transform: skewX(-4deg); } + 60% { -moz-transform: skewX(3deg); } + 70% { -moz-transform: skewX(-2deg); } + 80% { -moz-transform: skewX(1deg); } + 90% { -moz-transform: skewX(0deg); } + 100% { -moz-transform: skewX(0deg); } +} + +@-ms-keyframes vibrate { + 0% { -ms-transform: skewX(9deg); } + 10% { -ms-transform: skewX(-8deg); } + 20% { -ms-transform: skewX(7deg); } + 30% { -ms-transform: skewX(-6deg); } + 40% { -ms-transform: skewX(5deg); } + 50% { -ms-transform: skewX(-4deg); } + 60% { -ms-transform: skewX(3deg); } + 70% { -ms-transform: skewX(-2deg); } + 80% { -ms-transform: skewX(1deg); } + 90% { -ms-transform: skewX(0deg); } + 100% { -ms-transform: skewX(0deg); } +} + +@-o-keyframes vibrate { + 0% { -o-transform: skewX(9deg); } + 10% { -o-transform: skewX(-8deg); } + 20% { -o-transform: skewX(7deg); } + 30% { -o-transform: skewX(-6deg); } + 40% { -o-transform: skewX(5deg); } + 50% { -o-transform: skewX(-4deg); } + 60% { -o-transform: skewX(3deg); } + 70% { -o-transform: skewX(-2deg); } + 80% { -o-transform: skewX(1deg); } + 90% { -o-transform: skewX(0deg); } + 100% { -o-transform: skewX(0deg); } +} + +@keyframes vibrate { + 0% { transform: skewX(9deg); } + 10% { transform: skewX(-8deg); } + 20% { transform: skewX(7deg); } + 30% { transform: skewX(-6deg); } + 40% { transform: skewX(5deg); } + 50% { transform: skewX(-4deg); } + 60% { transform: skewX(3deg); } + 70% { transform: skewX(-2deg); } + 80% { transform: skewX(1deg); } + 90% { transform: skewX(0deg); } + 100% { transform: skewX(0deg); } +} + +.vibrate { + -webkit-animation-name: vibrate; + -moz-animation-name: vibrate; + -ms-animation-name: vibrate; + -o-animation-name: vibrate; + animation-name: vibrate; + + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; + -ms-animation-timing-function: ease-in; + -o-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} \ No newline at end of file