- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 8894 Articles for Front End Technology
832 Views
To implement animation on top property with CSS, you can try to run the following code −ExampleLive Demo div { position: absolute; width: 300px; height: 200px; background-color: orange; color: white; top: 0; animation: myanim 3s infinite; } @keyframes myanim { 30% { top: 300px; } } CSS top property This is demo text!
447 Views
To implement animation on text-indent property with CSS, you can try to run the following code −ExampleLive Demo div { background-color: orange; border: 2px solid blue; animation: myanim 3s infinite; } @keyframes myanim { 30% { text-indent: 120px; } } CSS text-indent property This is demo text. This is demo text. This is demo text.This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
2K+ Views
To implement animation on text-shadow property in CSS, you can try to run the following code −ExampleLive Demo div { height: 200px; background-color: orange; border: 2px solid blue; animation: myanim 3s infinite; } @keyframes myanim { 30% { text-shadow: 10px 20px 30px blue; } } CSS text-shadow property This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
160 Views
To implement animation on text-decoration property with CSS, you can try to run the following code −ExampleLive Demo #demo { position: absolute; right: 0; width: 300px; height: 200px; background-color: blue; text-decoration: underline; animation: myanim 3s infinite; } @keyframes myanim { 30% { right: 350px; text-decoration-color: orange; } } CSS text-decoration-color property This is demo text.
106 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.
509 Views
To implement animation on outline-color property with CSS, you can try to run the following code −ExampleLive Demo div { width: 550px; height: 350px; outline: 2px solid blue; animation: myanim 3s infinite; } @keyframes myanim { 50% { outline-color: orange; } } CSS outline-color property
102 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.
190 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
84 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.