Remove blink of 4 red boxes on every page refresh

HTML & CSS
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

2

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…

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

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

6

It should work just fine :slight_smile:

7

thanks Ray.H
vineet

8

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