@keyframes fadeIndown { from { opacity:0; transform:translateY(-20px);} to { opacity:1; transform:translateY(0px);} } @-webkit-keyframes fadeIndown { from { opacity:0; -webkit-transform:translateY(-20px);} to { opacity:1; -webkit-transform:translateY(0px);} } @-moz-keyframes fadeIndown { from { opacity:0; -moz-transform:translateY(-20px)} to { opacity:1; -moz-transform:translateY(0px)} } .cssanimations .kad-fade-in-down { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); -webkit-animation:fadeIndown ease-in-out 1; /* call our keyframe named fadeIndown, use animattion ease-in-out and repeat it only 1 time */ -moz-animation:fadeIndown ease-in-out 1; animation:fadeIndown ease-in-out 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } @keyframes fadeInup { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0px);} } @-webkit-keyframes fadeInup { from { opacity:0; -webkit-transform:translateY(20px);} to { opacity:1; -webkit-transform:translateY(0px);} } @-moz-keyframes fadeInup { from { opacity:0; -moz-transform:translateY(20px)} to { opacity:1; -moz-transform:translateY(0px)} } @keyframes hoverup { 0%, 100% { transform:translateY(0px)} 50% {transform:translateY(10px);} } @-webkit-keyframes hoverup { 0%, 100% { -webkit-transform:translateY(0px)} 50% {-webkit-transform:translateY(10px);} } @-moz-keyframes hoverup { 0%, 100% { -moz-transform:translateY(0px)} 50% {-moz-transform:translateY(10px)} } .cssanimations .kad-fade-in-up { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px); -webkit-animation:fadeInup ease-in-out 1; /* call our keyframe named fadeInup, use animattion ease-in-out and repeat it only 1 time */ -moz-animation:fadeInup ease-in-out 1; animation:fadeInup ease-in-out 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s; } @keyframes fadeIn { from { opacity:0;} to { opacity:1;} } @-webkit-keyframes fadeIn { from { opacity:0;} to { opacity:1;} } @-moz-keyframes fadeIn { from { opacity:0;} to { opacity:1;} } .cssanimations .kad-fade-in { opacity: 0; -webkit-animation:fadeIn ease-in-out 1; /* call our keyframe named fadeIn, use animattion ease-in-out and repeat it only 1 time */ -moz-animation:fadeIn ease-in-out 1; animation:fadeIn ease-in-out 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } body { -webkit-animation-duration: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0.1s; } @-webkit-keyframes fontfix{ from{ opacity: 1; } to{ opacity: 1; } }