Css jitter and css Jitter
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Tilte> Document </title>
<Style>
@-Webkit-keyframes buzz-out {
0% {
-Webkit-transform: translateX (10px) rotate (20deg );
}
30% {
-Webkit-transform: tranalateX (-10px) rotate (-20deg );
}
60% {
-Webkit-transform: translateX (30px) rotate (50deg );
}
100% {
-Webkit-transform: translateX (-30px) rotate (-50deg );
}
}
# Buzz {
Width: 1000px;
Height: 400px;
Margin: 200px;
Background: # eee1e1;
Position: relative;
}
# Buzz: hover {
-Webkit-animation-name: buzz-out;
-Webkit-animation-duration: 1 s;
-Webkit-animation-timing-function: linear;
-Webkit-animation-iteration-count: 100;
}
</Style>
</Head>
<Body>
<Div id = "buzz">
<P> </p>
</Div>
</Body>
</Html>
The above is the code.
Related attributes: animation
Animation-name: Specifies the keyframe name to be bound to the selector.
Animation-duration: specifies the time in seconds or milliseconds
Animation-timing-fuction: Specifies the animation speed curve
Animation-delay: Specifies the delay before the start
Animation-iteration-count: specifies the number of times the animation should be played
Animation-direction: Specifies whether an animation should be played in turn in reverse playback.
@-Webkit-keyframes buzz-out {
0% {
-Webkit-transform: translateX (10px) rotate (20deg );
}
30% {
-Webkit-transform: tranalateX (-10px) rotate (-20deg );
}
60% {
-Webkit-transform: translateX (30px) rotate (50deg );
}
100% {
-Webkit-transform: translateX (-30px) rotate (-50deg );
}
}
The jitter amplitude can be set here.