Blockquote sway

Blockquote sway is an excerpt from the article that are considered important or has a special meaning. The sign is used to mark an important article, so it looks different from the other posts. and there is the effect of moving to the right and to the left so that it appears to sway.

Live Demo

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
CSS Code

blockquote {

width:450px;

display:block;

margin: 1em 10px;

padding:10px;

-webkit-user-select:text;

-moz-user-select:text;

-webkit-animation-name: shake;

-webkit-animation-duration: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

background:#424242;

padding:15px;

border-top:3px solid #3c98e8;

border-bottom:5px double #366dbb;

border-right:1px dashed #3659a8;

border-left:1px dashed #3880d2;

color:#D1D1D1;

-webkit-transition: 1.0s;

-moz-transition: 1.0s;

}

blockquote:hover{

-webkit-animation-name: none;

-webkit-animation-duration: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

-webkit-transition: 1.0s;

-moz-transition: 1.0s;

color:#fff;}

@-moz-keyframes shake /* Firefox*/

{

{ -ms-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, 2px) rotate(-1deg); }

60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }

70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }

80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }

90% { -moz-transform: translate(2px, 2px) rotate(0deg); }

100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }

}

@-ms-keyframes shake /* IE9*/

{

10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }

20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }

30% { -ms-transform: translate(0px, 2px) rotate(0deg); }

40% { -ms-transform: translate(1px, -1px) rotate(1deg); }

50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }

60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }

70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }

80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }

90% { -ms-transform: translate(2px, 2px) rotate(0deg); }

100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }

}

@-webkit-keyframes shake /* Safari and Chrome */

{

0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }

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, 2px) rotate(-1deg); }

60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }

70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }

80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }

90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }

100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }

} 

This tutorials blogger on blockquote sway on the blog. May be useful.