具有關鍵幀的CSS3動畫
[英]CSS3 animations with keyframes
問題描述
因此，我已經嘗試解決這個問題一個多小時了。 我使用Notepad ++作為我的代碼編輯器，並且我一直在嘗試制作css3動畫，但是它不起作用。 Notepad ++無法識別“ @ -webkit-keyframes”中的“ @”。 它保持黑色，而其他文本突出顯示為藍色。 我制作了無數次新文件，但沒有任何效果。 我的代碼如下：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Animation</title>
<link href="stylesheetani.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="change">
</div>
</body>
</html>
CSS：
#change {
width: 100px;
height: 100px;
border: 2px solid black;
-webkit-animation: changeColor 8s infinite;
}
@-webkit-keyframes changeColor {
0% {background-color: blue;}
25% {background-color: yellow;}
50% {background-color: green;}
75%{background-color: red;}
100% {background-color: black;}
}
1 個解決方案
解決方案1
1 已采納 2015-05-03 02:25:25
我添加了其他供應商前綴，但除此之外，您的代碼應該可以正常工作，如下所示：
#change { width: 100px; height: 100px; border: 2px solid black; -webkit-animation: changeColor 8s infinite; -moz-animation: changeColor 8s infinite; animation: changeColor 8s infinite; } @-webkit-keyframes changeColor { 0% {background-color: blue;} 20% {background-color: yellow;} 40% {background-color: green;} 60% {background-color: red;} 80% {background-color: black;} 100% {background-color: blue;} } @-moz-keyframes changeColor { 0% {background-color: blue;} 20% {background-color: yellow;} 40% {background-color: green;} 60% {background-color: red;} 80% {background-color: black;} 100% {background-color: blue;} } @keyframes changeColor { 0% {background-color: blue;} 20% {background-color: yellow;} 40% {background-color: green;} 60% {background-color: red;} 80% {background-color: black;} 100% {background-color: blue;} }
<div id="change"></div>
附帶說明一下，我更改了百分比並添加了另一個關鍵幀以平滑地過渡回藍色。
使用 CSS 關鍵幀循環“波浪”動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.