Skip to content

Instantly share code, notes, and snippets.

@sergejmueller

sergejmueller/shake.html

Created November 23, 2011 09:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sergejmueller/1388296 to your computer and use it in GitHub Desktop.
Save sergejmueller/1388296 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Schaukel-Effekt
Raw
shake.html
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 400px;
height: 200px;
background: gray;
animation: shake 1s ease-in;
-moz-animation: shake 1s ease-in;
-webkit-animation: shake 1s ease-in;
}
@keyframes shake {
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
@-moz-keyframes shake {
10%, 30%, 50%, 70%, 90% {
-moz-transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-moz-transform: translateX(10px);
}
}
@-webkit-keyframes shake {
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment