- 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 1566 Articles for CSS
![vanithasree](https://www.tutorialspoint.com/assets/profiles/13547/profile/60_85216-1512542720.jpg)
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
![Nishtha Thakur](https://www.tutorialspoint.com/assets/profiles/13598/profile/60_104893-1512719058.jpg)
212 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; }
![Sreemaha](https://www.tutorialspoint.com/assets/profiles/13570/profile/60_64977-1512709068.jpg)
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;} }
![radhakrishna](https://www.tutorialspoint.com/assets/profiles/13544/profile/60_40618-1512640354.jpg)
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; } }
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
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
![Smita Kapse](https://www.tutorialspoint.com/assets/profiles/13597/profile/60_103706-1512718957.jpg)
342 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; } }
![Giri Raju](https://www.tutorialspoint.com/assets/profiles/13536/profile/60_72105-1512540773.jpg)
139 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
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
545 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
![Prabhas](https://www.tutorialspoint.com/assets/profiles/13554/profile/60_90506-1512543588.jpg)
116 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;} }
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
217 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; }