為什么我關鍵幀動畫animation這幾章提交之后全沒有經(jīng)驗啊！我動畫都做來了，而且加了瀏覽器兼容

@keyframes changeColor {

? from {

? ? background: red;

? }

? to {

? ? background:green;

? }

}

div {

? width: 200px;

? height: 200px;

? background: red;

? text-align:center;

? margin: 20px auto;

? line-height: 200px;

? color: #fff;

}

div:hover {

? animation-name: changeColor;

? animation-duration:5s;

? -webkit-animation-duration:5s;

? animation-timing-function: ease-out;

? animation-delay: 0.1s;

}

Longingforthesun

2016-07-06

源自：十天精通CSS3 9-3

關注問題我要回答

1064

操作

收起

3 回答

weibo_哆啦A夢有大口袋_0
2016-07-12

出于對回答者的認同和尊重，解決了你的問題，請采納，謝謝

0 回復有任何疑惑可以回復我~

收起回答

weibo_哆啦A夢有大口袋_0
2016-07-12

因為css文件不能以@開頭，所以你在代碼前面加一行注釋就好了

/*不能以@開頭*/
@keyframes?changeColor?{
??from?{
????background:?red;
??}
??to?{
????background:green;
??}
}
div?{
??width:?200px;
??height:?200px;
??background:?red;
??text-align:center;
??margin:?20px?auto;
??line-height:?200px;
??color:?#fff;
}
div:hover?{
??animation-name:?changeColor;
??animation-duration:?5s;
??animation-timing-function:?ease-out;
??animation-delay:?.1s;
}