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

**pdxSherpa** · Mar 5, 2013 14:09

Hello all this is what I have:

Code:

.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 Code:

<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...?

**DaveMaxwell** · Mar 5, 2013 14:31

shouldn't it be keyframes?

**pdxSherpa** · Mar 5, 2013 14:38

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

Code:

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

and those two elements are also ignored.

**Paul O'B** · Mar 6, 2013 03:10

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.

Code:

<!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>

**pdxSherpa** · Mar 6, 2013 09:41

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.
DcssAnimate01.jpg

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

**Paul O'B** · Mar 6, 2013 13:43

lol - I don't know what I'm looking at

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.

**pdxSherpa** · Mar 6, 2013 15:09

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

**Paul O'B** · Mar 7, 2013 03:25

Originally Posted by pdxSherpa

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

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.

User Tag List

Thread: working on some css animation, using notepad ++ not all code is recongized.

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions