- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Fade Out Left Big Animation Effect with CSS
To implement Fade Down Left Big Animation Effect on an image with CSS, you can try to run the following code −
Example
<html>
<head>
<style>
.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 fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOutLeftBig"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
Published on 27-Apr-2018 12:31:40
- Related Questions & Answers
- Fade In Left Big Animation Effect with CSS
- Fade Out Left Animation Effect with CSS
- Fade Out Right Big Animation Effect with CSS
- Fade Out Up Big Animation Effect with CSS
- Fade Down Big Animation Effect with CSS
- Fade Out Animation Effect with CSS
- Fade In Right Big Animation Effect with CSS
- Fade In Up Big Animation Effect with CSS
- Fade In Left Animation Effect with CSS
- Fade Out Down Animation Effect with CSS
- Fade Out Right Animation Effect with CSS
- Fade Out Up Animation Effect with CSS
- Bounce Out Left Animation Effect with CSS
- Fade In Animation Effect with CSS
- Rotate Out Down Left Animation Effect with CSS
Advertisements