I have the following code:
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>What</title>
<style type="text/css">
</style>
</head>
<body dir="rtl">
<div id="page">
<div id="bothcontainer">
<div id="littlebox1" class="littlebox1sentence">put your mouse here</div>
<div id="littlebox1" class="triangle">
<div class="triangleborder"></div>
</div>
</div>
<div id="box1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</div>
</body>
</html>
and the CSS3:
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
}
#box1 {
position: relative;
width: 500px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 300px;
top: 250px;
text-align: justify;
-webkit-transition: all 1s;
font-size: large;
color: Black;
padding: 10px;
background: #D0D0D0;
opacity: 0;
}
@-webkit-keyframes myFirst {
0% {
right: 300px;
top: 160px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
right: 300px;
top: 200px;
opacity: 1;
}
}
#littlebox1 {
top: 200px;
position: absolute;
display: inline-block;
}
.littlebox1sentence {
font-size: large;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 25px;
padding-right: 10px;
background: #D0D0D0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: background .25s ease-in-out;
border-bottom: 2px solid red;
border-right: 2px solid red;
border-top: 2px solid red;
-webkit-transition-property:color, background;
-webkit-transition-duration: .25s, .25s;
-webkit-transition-timing-function: linear, ease-in;
}
#bothcontainer:hover ~ #box1 {
-webkit-transition: all 0s;
background: #909090;
right: 300px;
top: 200px;
-webkit-animation: myFirst .75s;
-webkit-animation-fill-mode: initial;
opacity: 1;
}
#bothcontainer:hover .littlebox1sentence {
background: #909090;
color:#D0D0D0
}
#bothcontainer:hover .triangle {
border-right: 20px solid #909090;
}
.triangle {
position: relative;
width: 0;
height: 0;
border-right: 20px solid #D0D0D0;
border-top: 26px solid transparent;
border-bottom: 25px solid transparent;
right: 186px;
-webkit-transition: border-right .25s ease-in-out;
margin-top: 2px;
}
.triangleborder {
position: absolute;
width: 0;
height: 0;
border-right: 22px solid red;
border-top: 28.5px solid transparent;
border-bottom: 27.5px solid transparent;
right: -20px;
-webkit-transition: border-right .25s ease-in-out;
top: -28px;
z-index: -15656567650;
}
Live example here:http://jsfiddle.net/VhGBv/
As you can see, when I put the mouse on the gray box, the backgound and the font color changing not at the same time.
My qusation is: How can I timing the animation so when I put the mouse on the gray sentense the arrow and the gray box will change their color at the same time (together)?
Fixed here: http://jsfiddle.net/VhGBv/1/
I changed this line: