Question

所以我正在使用本书HTML5中的代码作为J.D.Gauchat的主谋

（我将复制书中的所有内容）我的index.html看起来像这样

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>Web Design</title>
       <link rel="stylesheet" href="mystyles.css">
    </head>
    <body>
      <header id="mainbox">
         <span id="title"> Internet box 2.0</span>
      </header>
    </body>
    </html>

我的样式表看起来像这样

    body {
      text-align: center;
    }
    #mainbox {
            display: block;
            width: 500px;
            margin: 50px auto;
            padding: 15px;
            border: 1px solid #999999;
            animation: myanimation 1s ease-in-out 0s infinite normal none;
    }
    @keyframes myanimation {
    0% {
    background: #FFFFFF;
    }
    50% {
    background: #FF0000;
    }
    100% {
    background: #FFFFFF;
     }
    }

    #title{
    font: bold 36px verdana, sans-serif;
    }

我也使用了@-webkit-keyframes，根据本书的说明，动画根本不会发生，实际上没有任何反应。

我使用的是谷歌浏览器的最新版本，并且在转换或3D转换方面没有任何问题。只是动画。

非常感谢任何输入。

Answer 1

此CSS在Chrome中正常运行：

body {
  text-align: center;
}
#mainbox {
        display: block;
        width: 500px;
        margin: 50px auto;
        padding: 15px;
        border: 1px solid #999999;
    -webkit-animation: myanimation 1s ease-in-out 0s infinite normal none;
    animation: myanimation 1s ease-in-out 0s infinite normal none;
}
@keyframes myanimation {
0% {
background: #FFFFFF;
}
50% {
background: #FF0000;
}
100% {
background: #FFFFFF;
 }
}
@-webkit-keyframes myanimation {
0% {
background: #FFFFFF;
}
50% {
background: #FF0000;
}
100% {
background: #FFFFFF;
 }
}

#title{
font: bold 36px verdana, sans-serif;
}

fiddle

遇到Css3动画问题

1 个答案: