所以我正在使用 J.D. Gauchat 的这本书 HTML5 for masterminds 中的这段代码
(我会照原样抄书) 我的 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 转换方面没有遇到任何问题。只是动画。
任何输入将不胜感激。
最佳答案
这个 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;
}
关于css - 遇到 Css3 动画问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21508371/