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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -