Reputation: 1102
following is the html code i have written
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
width: 200px;
height: 250px;
border-radius: 15px;
background-color: pink;
border-color: red;
border-style: solid;
display: block;
-webkit-animation: myrotate 3s infinite; /* animation enabled */
}
#box:after /* not working if animation is disabled*/
{
content:"";
display:block;
position:absolute;
bottom:-15px;
left:20px;
width:0;
border-width:15px 25px 0;
border-style:solid;
border-color:#13961c transparent;
}
@-webkit-keyframes myrotate
{
from
{
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
to
{
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}
}
</style>
</head>
<body>
<center>
<div id="box">
xyz <br/>
yzx <br>
</div>
</center>
</body>
</html>
the problem is the speech bubble pointer appears only when animation myrotate is enabled. If it is commented the pointer disappear. I am new to css3 and html5. please explain.
Upvotes: 1
Views: 189
Reputation: 19629
Add this to the CSS:
#box {
position: relative;
}
The elements which have a position absolute
will only be positioned with respect to the closest parent which also has a position other than the default (static
) or if none of the parents have a non-static position, then the position is determined wrt the viewport.
I suspect when an element is animated, the browser doesn't treat is as a statically positioned object anymore.
Upvotes: 1