- 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
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
105 Views
This property specifies whether the text will be rendered aurally and if so, in what manner. The possible values are −none − Suppresses aural rendering so that the element requires no time to render.normal − Uses language-dependent pronunciation rules for rendering an element and its children.spell-out − Spells the text one letter at a time.Note the difference between an element whose 'volume' property has a value of 'silent' and an element whose 'speak' property has the value 'none'. The former takes up the same time as if it had been spoken, including any pause before and after the element, but no ... Read More
![Yaswanth Varma](https://www.tutorialspoint.com/assets/profiles/511236/profile/60_1602256-1662106429.jpg)
105 Views
Animations never fail to attract people in. When you present them with a painting and a video, they will always focus on the moving image since it is more visually appealing. Thus, the best method to get people to visit your website is to incorporate animations. The things you can accomplish using CSS animations are endless. A few lines of code can be used to generate stunning and interesting animations. All you need to do is adjust the direction and give a few parameters. For getting better understanding on implemeneting the fade out right big animation effect with CSS let's ... Read More
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
130 Views
To implement Fade Down Big Animation Effect on an image with CSS, you can try to run the following code −ExampleLive 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: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } Reload page function myFunction() { location.reload(); }
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
67 Views
To implement Bounce Out Right Animation Effect with CSS, you can try to run the following codeExample .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: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } >/div> Reload page function myFunction() { location.reload(); }
![Lakshmi Srinivas](https://www.tutorialspoint.com/assets/profiles/13528/profile/60_91717-1512651120.jpg)
174 Views
The CSS background-image property is used to specify the background image. You can try to run the following code to implement the background-image property in CSS −Example #demo { border: 5px dashed red; padding: 10px; background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg"); } www.tutorialspoint.com Tutorials Point originated from the idea ... Read More
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
102 Views
The CSS background-lip 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 in CSS −Example #demo { border: 5px dashed red; padding: 10px; background: orange; background-clip: padding-box; } ... Read More
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
71 Views
To implement Bounce Out Left Animation Effect with CSS, you can try to run the following codeExample .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: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } Reload page function myFunction() { location.reload(); }
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
127 Views
To implement Bounce Up Animation Effect with CSS, you can try to run the following code −Example .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: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } >/div> Reload page function myFunction() { location.reload(); }
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
119 Views
To implement Bounce Out Down Animation Effect with CSS, you can try to run the following code −ExampleLive 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: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } Reload page function myFunction() { location.reload(); }
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
161 Views
To implement Bounce Out Animation Effect with CSS, you can try to run the following code −ExampleLive 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: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } Reload page function myFunction() { location.reload(); }