- 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 In Down Animation Effect with CSS
To implement Fade In Down 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 fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInDown"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
Published on 27-Apr-2018 11:23:35
- Related Questions & Answers
- Fade Out Down Animation Effect with CSS
- Fade Down Big Animation Effect with CSS
- Fade In Animation Effect with CSS
- Fade Out Animation Effect with CSS
- Fade In Up Animation Effect with CSS
- Fade In Right Animation Effect with CSS
- Fade In Left Animation Effect with CSS
- Fade Out Left Animation Effect with CSS
- Fade Out Right Animation Effect with CSS
- Fade Out Up Animation Effect with CSS
- Fade In Right Big Animation Effect with CSS
- Fade In Up Big Animation Effect with CSS
- Fade In Left Big Animation Effect with CSS
- Bounce In Down Animation Effect with CSS
- Fade Out Left Big Animation Effect with CSS
Advertisements