在css3中计时动画答案

【问题标题】：timing the animation in css3在css3中计时动画
【发布时间】：2012-11-23 16:34:18
【问题描述】：

我有以下代码： 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>

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

如你所见，当我将鼠标放在灰色框上时，背景和字体颜色变化不是同时。我的问题是：如何对动画进行计时，以便当我将鼠标放在灰色句子上时，箭头和灰色框会同时同时（一起）改变它们的颜色？

【问题讨论】：

三角形上的计时函数是ease-in-out，但对于“将鼠标放在此处”过渡，您使用的是ease-in。让那些相同，它会为你工作。

标签： css animation hover

【解决方案1】：

固定在这里：http://jsfiddle.net/VhGBv/1/

我改变了这一行：

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

【讨论】：