CSS trembling, dog trembling

CSS trembling, dog trembling

Trembling with pure CSS

When you create an animation in @ keyframes, bind it to a selector. Otherwise, no animation effect will be generated.

You can bind an animation to a selector by specifying at least two CSS3 animation attributes:

• Specifies the animation name
• Specifies the animation duration

Html

<Section class = "section carrot" style = "position: absolute; "> 
Css
/* Rotate around the image's point */. shake {display: inline-block;-webkit-transform-origin: center;-ms-transform-origin: center ;} /* Basic jitter */. shake: hover {-webkit-animation-name: shake-base;-ms-animation-name: shake-base; -webkit-animation-duration: 100 ms;-ms-animation-duration: 100 ms; animation-duration: 100 ms;-webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite;-webkit-animation-timing-function: Allow-in-out; -ms-animation-timing-function: memory-in-out;-webkit-animation-delay: 0 s; -ms-animation-delay: 0 s; animation-delay: 0 s;-webkit-animation-play-state: running;-ms-animation-play-state: running; animation-play-state: running;}/* non-stop jitter */. shake. shake-constant {-webkit-animation-name: shake-base;-ms-animation-name: shake-base; -webkit-animation-duration: 100 ms;-ms-animation-duration: 100 ms; animation-duration: 100 ms;-webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite;-webkit-animation-timing-function: Allow-in-out; -ms-animation-timing-function: memory-in-out;-webkit-animation-delay: 0 s; -ms-animation-delay: 0 s; animation-delay: 0 s;-webkit-animation-play-state: running;-ms-animation-play-state: running; animation-play-state: running;}/* keyframes animation */@-webkit-keyframes shake-base {0% {-webkit-transform: translate (0px, 0px) rotate (0deg);} 2% {-webkit-transform: translate (-0.5px, 1.5px) rotate (0.5deg);} 4% {-webkit-transform: translate (-0.5px, 1.5px) rotate (-0.5deg);} 6% {-webkit-transform: translate (-2.5px,-1.5px) rotate (0.5deg);} 8% {-webkit-transform: translate (-2.5px, -2.5px) rotate (-1.5deg);} 10% {-webkit-transform: translate (1.5px, 1.5px) rotate (-1.5deg);} 12% {-webkit-transform: translate (-2.5px,-0.5px) rotate (-0.5deg);} 14% {-webkit-transform: translate (1.5px,-2.5px) rotate (-0.5deg );} 16% {-webkit-transform: translate (0.5px, 1.5px) rotate (0.5deg);} 18% {-webkit-transform: translate (-2.5px,-0.5px) rotate (0.5deg );} 20% {-webkit-transform: translate (-0.5px,-0.5px) rotate (-1.5deg);} 22% {-webkit-transform: translate (-2.5px,-1.5px) rotate (-1.5deg);} 24% {-webkit-transform: translate (-1.5px,-2.5px) rotate (-1.5deg);} 26% {-webkit-transform: translate (0.5px, -0.5px) rotate (-1.5deg);} 28% {-webkit-transform: translate (-0.5px,-1.5px) rotate (-0.5deg);} 30% {-webkit-transform: translate (-2.5px, 1.5px) rotate (0.5deg);} 32% {-webkit-transform: translate (-2.5px,-2.5px) rotate (-0.5deg );} 34% {-webkit-transform: translate (-1.5px, 0.5px) rotate (-1.5deg);} 36% {-webkit-transform: translate (1.5px,-1.5px) rotate (-1.5deg);} 38% {-webkit-transform: translate (0.5px,-0.5px) rotate (-0.5deg);} 40% {-webkit-transform: translate (-0.5px, 0.5px) rotate (0.5deg);} 42% {-webkit-transform: translate (0.5px,-2.5px) rotate (-0.5deg);} 44% {-webkit-transform: translate (0.5px, -2.5px) rotate (-0.5deg);} 46% {-webkit-transform: translate (-1.5px, 1.5px) rotate (-1.5deg);} 48% {-webkit-transform: translate (0.5px,-2.5px) rotate (-0.5deg);} 50% {-webkit-transform: translate (-1.5px,-0.5px) rotate (-1.5deg );} 52% {-webkit-transform: translate (-2.5px,-0.5px) rotate (-1.5deg);} 54% {-webkit-transform: translate (1.5px, 0.5px) rotate (-1.5deg);} 56% {-webkit-transform: translate (0.5px, 0.5px) rotate (-1.5deg);} 58% {-webkit-transform: translate (0.5px, 1.5px) rotate (-0.5deg);} 60% {-webkit-transform: translate (-0.5px,-2.5px) rotate (-0.5deg);} 62% {-webkit-transform: translate (-2.5px,-1.5px) rotate (-0.5deg);} 64% {-webkit-transform: translate (-1.5px, 0.5px) rotate (0.5deg );} 66% {-webkit-transform: translate (0.5px,-0.5px) rotate (-1.5deg);} 68% {-webkit-transform: translate (-1.5px,-0.5px) rotate (-1.5deg);} 70% {-webkit-transform: translate (-0.5px,-2.5px) rotate (-1.5deg);} 72% {-webkit-transform: translate (-2.5px,-0.5px) rotate (-1.5deg);} 74% {-webkit-transform: translate (-2.5px, 0.5px) rotate (0.5deg );} 76% {-webkit-transform: translate (1.5px,-1.5px) rotate (-1.5deg);} 78% {-webkit-transform: translate (1.5px,-2.5px) rotate (0.5deg);} 80% {-webkit-transform: translate (-2.5px,-2.5px) rotate (-0.5deg);} 82% {-webkit-transform: translate (-2.5px, -1.5px) rotate (0.5deg);} 84% {-webkit-transform: translate (0.5px,-2.5px) rotate (-0.5deg);} 86% {-webkit-transform: translate (-2.5px, 0.5px) rotate (-0.5deg);} 88% {-webkit-transform: translate (-2.5px,-0.5px) rotate (-0.5deg );} 90% {-webkit-transform: translate (-1.5px,-1.5px) rotate (-1.5deg);} 92% {-webkit-transform: translate (-0.5px,-1.5px) rotate (-0.5deg);} 94% {-webkit-transform: translate (0.5px,-0.5px) rotate (-0.5deg);} 96% {-webkit-transform: translate (-2.5px, -2.5px) rotate (0.5deg);} 98% {-webkit-transform: translate (-0.5px, 1.5px) rotate (-0.5deg );}}
 
 

Jitter Mode
Move the mouse up and start to shake

 

 
  
Bs
Basic Jitter
 
  
Bytes
Jitter