- 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
75 Views
You can try to run the following code to implement the animation-timing-function property:ExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} #demo2 {animation-timing-function: ease-in;} ease effect ease-in effect
215 Views
Use the [attribute ~= "value"] selector to select elements with an attribute value containing a specified word with CSS.You can try to run the following code to implement the [attribute ~= "value"] selector. Here, the word we are searching is “Tutorials”,ExampleLive Demo [alt ~= Tutorials] { border: 5px solid orange; border-radius: 5px; }
69 Views
Use the animation-play-state property to set whether the animation is running or paused.You can try to run the following code to implement the animation-play-state property:ExampleLive Demo div { width: 150px; height: 200px; position: relative; background: red; animation-name: myanim; animation-duration: 2s; animation-play-state: paused; } @keyframes myanim { from {left: 0px; background-color: green;} to {left: 100px; background-color: blue;} }
91 Views
Use the animation-name property to set the name of the @keyframes animation.You can try to run the following code to implement the animation-name property:ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 3s; animation-delay: 3s; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
91 Views
Use the animation-iteration-count property to set the number of times an animation should be played with CSS.You can try to run the following code to implement the animation-iteration-count propertyExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} #demo2 {animation-timing-function: ease-in;} ease effect ease-in effect
344 Views
The shorthand property to set all the animation properties is animation. It sets the animation duration, animation name, etc.You can try to run the following code to learn how to work with Animation Shorthand property:ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation: myanim 2s } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
145 Views
Use the CSS background-origin property to set the border-box value. With the border-box value, the background image begins from the upper left corner of the border.You can try to run the following code to implement the border-box value:ExampleLive Demo #value1 { border: 3px solid blue; padding: 30px; background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg); background-repeat: no-repeat; background-origin: padding-box; } ... Read More
559 Views
Use the [attribute*=”value”] selector to select elements whose attribute value contains a specified value.You can try to run the following code to implement the CSS [attribute*="value"] selector,ExampleLive Demo [href* = java] { border: 5px solid orange; border-radius: 5px; } PHP Tutorial Java Tutorial
119 Views
To set the elements to retain the style values set by the first keyframe, use the animation-fill-mode property with the forwards value.ExampleLive Demo div { width: 150px; height: 200px; position: relative; background: red; animation-name: myanim; animation-duration: 2s; animation-fill-mode: forwards; } @keyframes myanim { from {left: 0px; background-color: green;} to {left: 200px; background-color: blue;} }
218 Views
To select elements whose attribute value ends with a specified value, use the [attribute$ = ”value”] selector.You can try to run the following code to implement the CSS [attribute$ = "value"] Selector,ExampleLive Demo [alt$ = Connect] { border: 5px solid blue; border-radius: 5px; }