i trying create text fade view after few seconds facing problems. fade view working fine text disappears after shown. secondly need animation work in delayed manner when set delay doesn't seem make difference. delay working fine earlier.
why animation disappear shortly after shown? should displayed correctly? why delay not working now? please me. solution must simple not thinking along right line.
the below code.
html:
<div id="container" class="container"> <span class="fadetext">sample text</span> </div> css:
.container{ margin: 5% auto; position: relative; text-align: center; } .fadetext{ color: #5b83ad; font-weight: bold; font-size: 125%; border-radius: 4px; border: 1px solid #5b83ad; padding: 4px; text-align: center; opacity: 0; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; animation-delay: 5s; -webkit-animation: fadein 5s ease-in; -moz-animation: fadein 5s ease-in; animation: fadein 5s ease-in; } /* animations */ @-moz-keyframes fadein{ 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadein{ 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein{ 0% { opacity: 0; } 100% { opacity: 1; } } /* end of animations */ fiddle: http://jsfiddle.net/hg4xy/
note: have extracted relevant portion of code , posted here.
set animation-fill-mode forwards. animation executing fine going original state (which opacity: 0) after last key-frame executed. setting fill-mode forwards make text retain opacity set last key-frame (which opacity: 1). alternatively, can remove opacity: 0 property .fadetext.
-webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; /* use standard un-prefixed version last */ set animation-delay after animation property in css. being set before animation property , since animation short-hand property doesn't specify delay getting over-written. alternatively, modify short-hand property shown below.
-webkit-animation: fadein 5s ease-in; -moz-animation: fadein 5s ease-in; animation: fadein 5s ease-in; /* set delay after animation */ -webkit-animation-delay: 5s; -moz-animation-delay: 5s; animation-delay: 5s; /* addresses both items. 4th parameter delay , 5th fill mode */ -webkit-animation: fadein 5s ease-in 5s forwards; -moz-animation: fadein 5s ease-in 5s forwards; animation: fadein 5s ease-in 5s forwards; 