The swing animation effect move or cause to move back and forth or from side to side while suspended or on an axis to an element.ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             ... Read More

Use this element to insert some content before an element. The following example demonstrates how to use the :before element to add some content to any element.ExampleLive Demo                    p:before          {             content: url(/images/bullet.gif)          }                     This line will be preceded by a bullet.       This line will be preceded by a bullet.       This line will be preceded by a bullet.    

The shake animation effect move (an object) up and down or from side to side for an element.ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes shake {             0%, 100% {-webkit-transform: translateX(0);}             10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}             20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}          }          @keyframes shake {             0%, 100% {transform: translateX(0);}             10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}             20%, 40%, 60%, 80% {transform: translateX(10px);}          }          .shake {             -webkit-animation-name: shake;             animation-name: shake;          }                           Reload page                function myFunction() {             location.reload();          }          

To create rotate out down left animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateOutDownLeft {             0% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(90deg);                opacity: 0;             }          }          @keyframes rotateOutDownLeft {             0% {                transform-origin: left bottom;                transform: rotate(0);                opacity: 1;             }             100% {                transform-origin: left bottom;                transform: rotate(90deg);                opacity: 0;             }          }          .rotateOutDownLeft {             -webkit-animation-name: rotateOutDownLeft;             animation-name: rotateOutDownLeft;          }                           Reload page                function myFunction() {             location.reload();          }          

To create rotate out animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateOut {             0% {                -webkit-transform-origin: center center;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: center center;                -webkit-transform: rotate(200deg);                opacity: 0;             }          }          @keyframes rotateOut {             0% {                transform-origin: center center;                transform: rotate(0);                opacity: 1;             }             100% {                transform-origin: center center;                transform: rotate(200deg);                opacity: 0;             }          }          .rotateOut {             -webkit-animation-name: rotateOut;             animation-name: rotateOut;          }                           Reload page                function myFunction() {             location.reload();          }          

To create a rotate in upright animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateInUpRight {             0% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(-90deg);                opacity: 0;             }             100% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(0);                opacity: 1;             }          }          @keyframes rotateInUpRight {             0% {                transform-origin: right bottom;                transform: rotate(-90deg);                opacity: 0;             }             100% {                transform-origin: right bottom;                transform: rotate(0);                opacity: 1;             }          }          .rotateInUpRight {             -webkit-animation-name: rotateInUpRight;             animation-name: rotateInUpRight;          }                           Reload page                function myFunction() {             location.reload();          }          

To create a rotate in up left animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateInUpLeft {             0% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(-90deg);                opacity: 0;             }          }          @keyframes rotateInUpLeft {             0% {                transform-origin: left bottom;                transform: rotate(0);                opacity: 1;             }             100% {               -transform-origin: left bottom;               -transform: rotate(-90deg);               opacity: 0;             }          }          .rotateInUpLeft {             -webkit-animation-name: rotateInUpLeft;             animation-name: rotateInUpLeft;          }                           Reload page                        function myFunction() {             location.reload();          }          

Use the :first-line element to add special effects to the first line of elements in the document. ExampleYou can try to run the following code to add special styles to the first line of textLive Demo                    p:first-line {             text-decoration: underline;          }          p.noline:first-line {             text-decoration: none;          }                     This line would not have any underline because this ... Read More

To create a wobble animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: ... Read More

To flatten the color depth, you need to create an X-Ray.The following parameter is used in this filter −S.NoParameter & Description1XrayGrayscales and flattens the color depth.ExampleYou can try to run the following code to create an X-Ray effect −Live Demo                   CSS Tutorials