定時動畫CSS3

我有以下代碼： HTML：定時動畫CSS3

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

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

}

這裏現場例如：http：//jsfiddle.net/VhGBv/

正如您所看到的，當我將鼠標放在灰色框上時，背景和字體顏色發生變化不在同一時間。我的疑問是：我如何計算動畫的時間，所以當我把鼠標放在灰色的警戒箭頭上，灰色框會在的同一時間（在一起）改變它們的顏色？

來源

2012-12-05 Nave Tseva

你的三角形的定時功能是'易於在-out'但對於「鼠標放這裏」過渡，你正在使用'易於in'。讓這些都是一樣的，它會爲你工作。 – Shmiddty

非常感謝！ –

固定在這裏：http://jsfiddle.net/VhGBv/1/

我改變了這一行：

.littlebox1sentence { 
    ... 
    -webkit-transition-timing-function: linear, ease-in-out; 
}

來源

2012-12-05 18:51:30 Shmiddty

非常感謝！它很棒！ –

回答

相關問題