To create Tada 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 tada {             0% {-webkit-transform: scale(1);}             10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}             30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}             40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}             100% {-webkit-transform: scale(1) rotate(0);}          }          @keyframes tada {             0% {transform: scale(1);}             10%, 20% {transform: scale(0.9) rotate(-3deg);}             30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}             40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}             100% {transform: scale(1) rotate(0);}          }          .tada {             -webkit-animation-name: tada;             animation-name: tada;          }                           Reload page                function myFunction() {             location.reload();          }          

For many years, drop caps have been utilized in print media to elegantly introduce the first letter of the opening paragraph in a section or chapter. Because they are applied to just one letter, these drop caps serve to attract the reader's attention. This is also a wonderful opportunity to utilize a highly styled font without detracting from the readability of the text. By using the::first-letter pseudo element and the new initial-letter property in CSS, it is possible to achieve the same drop cap effect. CSS ::first-letter pseudo element In a block-level container, the ::first-letter pseudo-element applies a style to ... Read More

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