css - hover animation fadein opacity 0.5 hover opacity 1 -
initially had box changes opacity 0.5 1 @ mouseover via transition. works well.
now want add delayed fade-in animation @ beginning opacity 0 0.5. unfortunately mouseover transition doesn't work longer.
i appreciate every idea :)
.box { width: 200px: height: 50px; padding:20px; background-color: red; transition: 1s ease; opacity: 0; opacity: 0.5 \9; -webkit-animation:fadein ease-in 0.5; -moz-animation:fadein ease-in 0.5; animation:fadein ease-in 0.5; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-delay: 3.5s; -moz-animation-delay: 3.5s; animation-delay: 3.5s; } .box:hover {transition: 0.5s; opacity: 1; }
<div class="box">this box</div>
if want fadein animation changes opacity 0 0.5 @ beginning, need define fadein as:
.box { opacity: 0; -webkit-animation:fadein ease-in 0.5; -moz-animation:fadein ease-in 0.5; animation:fadein ease-in 0.5; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-delay: 3.5s; -moz-animation-delay: 3.5s; animation-delay: 3.5s; } @keyframes fadein{ from{opacity: 0;} to{opacity: 0.5;} } .box:hover {transition: 0.5s; opacity: 1; }
Comments
Post a Comment