SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    796
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

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

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

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,289
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    shouldn't it be keyframes?
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    796
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,524
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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>

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    796
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,524
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    796
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I was pointing at the "@" & "from" line. but that's cool will go experiment w/your code.
    Thank you!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,524
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    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.

  9. #9
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    cssAnimation.png

    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. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,524
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Zobot View Post
    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:

    cssAnimation.png

    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.
    Hi Welcome to Sitepoint

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

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •