If you are writing your document using a character set other than ASCII or ISO-8859-1 you might want to set the @charset rule at the top of your stylesheet to indicate what character set the style sheet is written in.The @charset rule must be written right at the beginning of the style sheet without even space before it. The value is held in quotes and should be one of the standard character-sets.ExampleLet us see an example    

Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.ExampleYou can try to run the following code to implement bounce animation effect −Live 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: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounce {             0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}             40% {-webkit-transform: translateY(-30px);}             60% {-webkit-transform: translateY(-15px);}          }          @keyframes bounce {             0%, 20%, 50%, 80%, 100% {transform: translateY(0);}             40% {transform: translateY(-30px);}             60% {transform: translateY(-15px);}          }          .bounce {             -webkit-animation-name: bounce;             animation-name: bounce;          }                           Reload page                function myFunction() {             location.reload();          }          

The CSS background-origin property is used to specify the position of the background images. You can try to run the following code to implement the background-image property −ExampleLive Demo                    #demo {             border: 5px dashed red;             padding: 10px;             background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");             background-origin: content-box;          }                              www.tutorialspoint.com   ... Read More

The animation is the process of creating motion effects and changes the appearance.CSS does support different animation effects to change the event motion.Under Animation, a concept Keyframes is used. Keyframes will control the intermediate animation steps in CSS3.The below example shows height, width, color, name, and duration of animation with keyframes syntax −Syntax@keyframes animation {    from {background-color: pink;}    to {background-color: green;} } div {    width: 100px;    height: 100px;    background-color: red;    animation-name: animation;    animation-duration: 5s; }

The CSS background-clip property is used to declare the painting area of the background. You can try to run the following code to implement the background-clip property with CSS −ExampleLive Demo                    #demo {             border: 5px dashed red;             padding: 10px;             background: orange;             background-clip: padding-box;          }                           ... Read More

This property specifies a pause to be observed before speaking an element's content. The possible values aretime − Expresses the pause in absolute time units (seconds and milliseconds).percentage − Refers to the inverse of the value of the speech-rate property. For example, if the speech-rate is 120 words per minute (i.e. a word takes half a second, or 500ms), then a pause-before of 100% means a pause of 500 ms and a pause-before of 20% means 100ms.

This property is a shorthand for setting pause-before and pause-after. If two values are given, the first value is pause-before and the second is pause-after.ExampleLet us see an example of pause property in CSS −    

The CSS background property is used to set all the background image properties in one section.ExampleYou can try to run the following code to implement the background property:Live Demo                    #demo {             background: lightblue url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg") no-repeat fixed top;          }                              www.tutorialspoint.com          Tutorials Point originated from the idea that there exists a             class of readers ... Read More

Wave effect is used to give the object a sine wave distortion to make it look wavy.The following parameters can be used in this filterS.NoParameter & Description1AddA value of 1 adds the original image to the waved image, 0 does not.2FreqThe number of waves.3LightThe strength of the light on the wave (from 0 to 100).4PhaseAt what degree the sine wave should start (from 0 to 100).5StrengthThe intensity of the wave effect.ExampleYou can try to run the following code to set wave effect −Live Demo                         Text Example:       CSS Tutorials    

Use the border-bottom-left-radius property to set the border of the bottom left corner. You can try to run the following code to implement the border-bottom-left-radius property −ExampleLive Demo                    #rcorner {             border-radius: 25px;             border-bottom-left-radius: 45px;             background: blue;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!