Here 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;
}
#box:after
{
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);
}
to
{
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<center>
<div id="box">
xyz <br/>
yzx <br>
</div>
</center>
</body>
</html>
My issue is that the speech bubble pointer only appears when the myrotate animation is enabled. It disappears when the animation is disabled. As a newbie to CSS3 and HTML5, can someone please explain this behavior?