SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why doesnt this keyframe animation work?

    I have a heart on my site and want to make it pounding. It is a fontello icon.

    The code looks like this:

    the markup:

    Code HTML4Strict:
    <i class="icon-heart"></i>

    the fontello "setup":

    Code CSS:
    @font-face {
      font-family: 'fontello';
      src: url('../font/fontello.eot?23402899');
      src: url('../font/fontello.eot?23402899#iefix') format('embedded-opentype'),
           url('../font/fontello.woff?23402899') format('woff'),
           url('../font/fontello.ttf?23402899') format('truetype'),
           url('../font/fontello.svg?23402899#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
     
    [class^="icon-"]:before, [class*=" icon-"]:before {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-align: center;
    }
     
    .icon-heart:before { content: '\e80c'; } /* '' */

    The keyframe and rest of the heart css:

    Code CSS:
    @-webkit-keyframes pound {
        to { transform: scale(1.4); }
    }
     
    .icon-heart {
        color: #e00;
        animation: pound .25s infinite alternate;
        transform-origin: center;
    }

    I have never used keyframes before, so I dont know if i have to do something more to make it work.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You need to include the webkit prefix for the transform property.

    e.g.
    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">
    @-webkit-keyframes pound {  
    to {-webkit-transform: scale(1.4);}
    }
    @-moz-keyframes pound {  to {-webkit-transform: scale(1.4);}
    }
    @keyframes pound {  
    to {transform: scale(1.4);}
    }
    .icon-heart {
    	color: #e00;
    	-webkit-animation: pound .25s infinite alternate;
    	-moz-animation: pound .25s infinite alternate;
    	animation: pound .25s infinite alternate;
    	display:inline-block;
    }
    </style>
    </head>
    
    <body>
    <div class="icon-heart">Test</div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    You need to include the webkit prefix for the transform property.

    e.g.
    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">
    @-webkit-keyframes pound {  
    to {-webkit-transform: scale(1.4);}
    }
    @-moz-keyframes pound {  to {-webkit-transform: scale(1.4);}
    }
    @keyframes pound {  
    to {transform: scale(1.4);}
    }
    .icon-heart {
    	color: #e00;
    	-webkit-animation: pound .25s infinite alternate;
    	-moz-animation: pound .25s infinite alternate;
    	animation: pound .25s infinite alternate;
    	display:inline-block;
    }
    </style>
    </head>
    
    <body>
    <div class="icon-heart">Test</div>
    </body>
    </html>
    thx dude that solved it.


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
  •