Working on some css animation, using notepad ++ not all code is recongized

HTML & CSS
1

Hello all this is what I have:

.star01 {
position: relative;
top: 20px;
left: 20px;
-webkit-animation-name: slide;
-webkit-animation-duration: 2s;
}

@-webkit-keyframe slide{
	from {-webkit-transform: translateX(0px);}
	to {-webkit-transform: translateX(400px);}
}

& this my html

<html>
<head>
<link rel="stylesheet"  href="css/animate01.css">
</head>
<body>
<div id="wrap">
<img class="star01" src="images/star01.png" alt="starslide" width="144" height="144" />
</div>
</body>

</html>

the @-webkit-keyframe slide{
from {-webkit-transform: translateX(0px);}
to {-webkit-transform: translateX(400px);}

do not seem to be recognized i see no typos. Code looks correct…?

2

shouldn’t it be keyframes?

3

thank you good point.
still no dice though. the “@” and the “from” line are still ignored.
also tried


[COLOR="#FF0000"]@[/COLOR]-moz-keyframes slide {
	[COLOR="#FF0000"]from{-moz-transform:[/COLOR] translateX(0px);}
	to{-moz-transform: translateX(400px);}
}

and those two elements are also ignored.

4

Hi,

I’m not sure what you mean by ignored but if you add the “s” as Dave said then the demo runs in Chrome.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
img {
	display:block;
	background:red;
	width:100px;
	height:100px;
}
.star01 {
	position: relative;
	top: 20px;
	left: 20px;
	-webkit-animation-name: slide;
	-webkit-animation-duration: 2s;
}
 @-webkit-keyframes slide {  from {
-webkit-transform: translateX(0px);
}
to { -webkit-transform: translateX(400px); }
}
</style>
</head>

<body>
<div id="wrap"> <img class="star01" src="images/star01.png" alt="starslide" width="144" height="144" /> </div>
</body>
</html>
5

Hello Paul, thanks for looking at this post.
I added a screenshot to show what I mean by “ignore” the css info. I also have it in chrome and it isn’t running.
D

ps. I can see your sample works great…don’t understand what I am doing wrong.

6

lol - I don’t know what I’m looking at :slight_smile: It looks like a picture of some code.

If your editor is complaining about something then you’ve probably copied some invisible characters in there. Just delete it all and use the same code from my example that I pasted above.

If you are talking about validation then vendor extensions don’t validate a such but follow valid constructs.

7

I was pointing at the “@” & “from” line. but that’s cool will go experiment w/your code.
Thank you!

8

Yes but I’m not sure what it was meant to signify. There’s nothing wrong with @ as such. I would create a new file just in case you have some invisible characters trapped in there.

9

I am having the identical problem as this OP—I followed everyone’s advice, and started with a fresh file, just to check for syntax errors.

This is what mine looks like:

I’m sure everyone can see that the “color coding” of the actual code indicates a problem, beginning with the “@-webkit” rule, itself (where the “@” does not appear uniform with the rest of the identifier in light blue, as I assume it should).

So, my question is, “Why?”. Can anyone else testify to his/ her success using the CSS animation property in Notepad++?

I really don’t feel like busting out the JS to do a simple line animation. Not when this new CSS rule seems so simple and easy to incorporate.

10

Hi Welcome to Sitepoint :slight_smile:

You didn’t post your actual css and html so we can’t tell whether you have copied any invisible characters in there by mistake. I copied your css by hand and it works fine for me (in webkit browsers of course).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.star01{
	position:relative;
	top:20px;
	left:20px;
	-webkit-animation-name:slide;	
	-webkit-animation-duration:2s;	
}
@-webkit-keyframes slide{
	from{-webkit-transform:translateX(0px)}	
	to{-webkit-transform:translateX(400px)}
}

</style>
</head>

<body>
<div class="star01">testing</div>
</body>
</html>

I don’t use notepad++ but it should make no difference as the code should be fine unless you have copied invisible characters in there or are saving a bom with the css.

If you have a version on line then we can check why its not working?