vinpkl
1
hi all
this below code shows 4 red boxes slide-in when you mouse hover
and those red 4 boxes slide-out when you mouse out
But when ever you will refresh the page you will see a blink of those 4 red boxes.
i want to remove that blink of 4 red boxes when ever you refresh the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.box-holder{width:250px; border:1px solid #CCCCCC; position:relative; height:250px; overflow:hidden}
.icons{position:absolute; top:7px; width:46px; animation:myanimout .3s ease-out; right:-50px}
.icons p{background-color:#F00; height:46px; width:46px; font-size:20px; color:#FFFFFF; text-align:center; padding:0px; margin:0px 0px
5px 0px;}
.box-holder:hover .icons{display:block;animation:myanim .3s ease-in; right:7px}
@keyframes myanim{
0%{right:-50px;}
100%{right:0px;}
}
@keyframes myanimout{
100%{right:-50px;}
0%{right:0px;}
}
</style>
</head>
<body>
<div class=" box-holder">
<div class="icons">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</div>
</body>
</html>
vineet
This worked for me…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.box-holder{width:250px; border:1px solid #CCCCCC; position:relative; height:250px; overflow:hidden}
.icons{position:absolute; top:7px; width:46px; animation:myanimout .3s ease-out; right:-50px}
.icons p{background-color:#F00; height:46px; width:46px; font-size:20px; color:#FFFFFF; text-align:center; padding:0px; margin:0px 0px
5px 0px;}
.icons{display:none;}
.box-holder:hover .icons{display:block;animation:myanim .3s ease-in; right:7px}
@keyframes myanim{
0%{right:-50px;}
100%{right:0px;}
}
@keyframes myanimout{
100%{right:-50px;}
0%{right:0px;}
}
</style>
</head>
<body>
<div class=" box-holder">
<div class="icons">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</div>
</body>
</html>
Don’t know if it’s the correct way, but it works…
vinpkl
3
hi Scout1idf
no, it doesnt work as required.
in my original code the 4 boxes slide in on hover
then they slideout on hover out
but when i tested your code, the blink has disappared but slideout function is not working.
vineet
Ray.H
4
The blink problem is not present when using transitions
.box-holder {
width: 250px;
border: 1px solid #CCCCCC;
position: relative;
height: 250px;
overflow: hidden
}
.icons {
position: absolute;
top: 7px;
width: 46px;
transition: all .3s ease-in-out;
right: -50px;
}
.icons p {
background-color: #F00;
height: 46px;
width: 46px;
font-size: 20px;
color: #FFFFFF;
text-align: center;
padding: 0px;
margin: 0px 0px 5px 0px;
}
.box-holder:hover .icons {
right: 7px;
}
vinpkl
5
Hi Ray.H
Thanks, its working fine now.
dont know why it didnt worked with animation BUT worked fine with transition
Does this transition works on apple safari ??
vineet
system
Closed
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.