I've spent the past hour trying to figure out this issue. I rely on Notepad++ as my code editor, and I've been attempting to create a css3 animation without success. The problem lies in Notepad++ not recognizing the "@" symbol in "@-webkit-keyframes." While all other text is highlighted in blue, the "@" remains black. I've tried creating new files multiple times, but nothing seems to work. Here's my code:
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;}
}