Remove blink of 4 red boxes on every page refresh

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…

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

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;
}

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

It should work just fine :slight_smile:

thanks Ray.H
vineet

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.