Found 1594 Articles for CSS

Perform Animation on CSS perspective-origin property

Chandu yadav
Updated on 12-Jun-2020 08:46:12

161 Views

To implement animation on perspective-origin property with CSS, you can try to run the following code −ExampleLive Demo                    #demo1 {             position: relative;             margin: auto;             height: 250px;               width: 350px;             padding: 10px;             border: 2px solid orange;             perspective: 125px;             animation: myanim 3s infinite;          }          @keyframes myanim {             70% {                perspective-origin: 5px 30%;             }          }          #demo2 {             padding: 70px;             position: absolute;             border: 2px solid black;             background-color: blue;             color: white;             transform: rotateX(30deg);          }                     CSS perspective-origin property       This is demo text in div1.          This is demo text in div2.          

Perform Animation on CSS perspective property

Arjun Thakur
Updated on 25-Jun-2020 15:00:07

137 Views

To implement animation on perspective property with CSS, you can try to run the following codeExampleLive Demo                    #demo1 {             position: relative;               margin-left: 120px;             height: 250px;             width: 350px;             padding: 10px;             border: 1px solid orange;             animation: myanim 3s infinite;             perspective: 200px;          }          @keyframes myanim {             50% {                perspective: 100px;             }          }          #demo2 {             padding: 90px;             position: absolute;             border: 1px solid black;             background-color: orange;             transform: rotateX(60deg);          }                     This is demo text in div1.          This is demo text in div2.          

CSS voice-pitch Speech Media property

Ankith Reddy
Updated on 25-Jun-2020 14:58:21

108 Views

The voice-pitch property in CSS is used to set the baseline pitch of the speaking voice. Here, you can set the pitchvoice-pitch: [[x-low | low | medium | high | x-high]]The following is an examplep {    voice-pitch: low; }

Perform Animation on CSS padding-top property

Daniol Thomas
Updated on 25-Jun-2020 14:59:08

280 Views

To implement animation on padding-top property with CSS, you can try to run the following code −ExampleLive Demo                    div {             width: 350px;             height: 150px;             outline: 3px solid maroon;             animation: myanim 3s infinite;          }          @keyframes myanim {             30% {                padding-top: 60px;             }          }                     CSS padding-top property          

CSS speak-as Speech Media property

George John
Updated on 25-Jun-2020 14:57:43

126 Views

Set whether the text is to be spoken or spelled using the speak-as speech media property.You can spell the text, speak the numeral, etc. To spell out, the following is an exampleabbr {    speak-as: spell-out; }Above, I have used spell-out that spells out one letter at a time.

Animate CSS padding-left property

Chandu yadav
Updated on 25-Jun-2020 14:56:10

472 Views

To implement animation on padding-left property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 350px;             height: 150px;             outline: 3px solid orange;             animation: myanim 3s infinite;          }          @keyframes myanim {             50% {                padding-left: 20px;             }          }                     CSS padding-left property          

CSS voice-range Speech Media property

Daniol Thomas
Updated on 25-Jun-2020 14:48:43

126 Views

The voice-range property in CSS is used to set the range of the speaking voice. This is the pitch range.The following is the syntax:voice-range: [[x-low | low | medium | high | x-high]]Above, set the range of pitch i.e. low, medium, high, etc.The following is an example of the voice-range property:p {    voice-range: 90Hz; }

Perform Animation on CSS margin-top

Arjun Thakur
Updated on 25-Jun-2020 14:46:44

1K+ Views

To implement animation on margin-top property with CSS, you can try to run the following codeExampleLive Demo                    div {             background-color: orange;             animation: myanim 4s infinite;             color: white;          }          @keyframes myanim {             30% {                margin-top: 30px;             }          }                     Heading One                This is demo text.          

Perform Animation on CSS min-width

Chandu yadav
Updated on 25-Jun-2020 14:46:05

290 Views

To implement animation on min-width property with CSS, you can try to run the following codeExampleLive Demo                    div {             overflow: auto;             width: 50%;             background-color: blue;             color: white;             border: 1px solid black;             animation: myanim 3s infinite;          }          @keyframes myanim {             ... Read More

Animate transform-origin property with CSS Animation

Ankith Reddy
Updated on 25-Jun-2020 14:44:43

997 Views

To implement animation on the transform-origin property with CSS, you can try to run the following codeExampleLive Demo                    #demo1 {             position: relative;             height: 300px;             width: 400px;             border: 2px solid black;             margin: 100px;             padding: 5px;          }          #demo2 {             padding: 30px;             position: absolute;             border: 1px solid black;             background-color: orange;             transform: rotate(45deg);             transform-origin: 30% 10%;             animation: mymove 3s infinite;          }          @keyframes mymove {             30% {                transform-origin: 0 0 0;             }          }                     CSS transform-origin property                Demo          

Advertisements