/*animation in css3*/
.batman {
width: 100%;
height: 95px;
position: relative;
}
.batman img{
width: 140px;
height: 120px;
position: absolute;
left: 0;
animation-name: batmanrun;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes batmanrun {
from {left:0;}
to {left:85%;}
}
#contact{
font-family: 'Spicy Rice', cursive;
color: green;
text-shadow: 3px 3px 3px red;
transition: transform 2s;
}
#contact:hover {
transform: rotate(360deg);
}
.collapsible{
font-family: 'Spirax', cursive;
font-size: 20px;
color: purple;
font-weight: bolder;
}
.footer-copyright{
font-family: 'Trade Winds', cursive;
}
.sidenav{
font-family: 'Princess Sofia', cursive;
}
/* /////////reponsive//////// */
@media screen and (min-width: 993px) {
.batman img{
position: absolute;
left: 0;
animation-name: batmanrun;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}
@media screen and (min-width: 769px) and (max-width:992px) {
.batman img{
position: absolute;
left: 0;
animation-name: batmanrun;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}
@media screen and (min-width: 481px) and (max-width:768px) {
.batman img{
position: absolute;
left: 0;
animation-name: batmanrun;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}
@media screen and (min-width:321px) and (max-width: 480px) {
.batman img{
position: absolute;
left: 0;
animation-name: batmanrun;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}