Vinnaren i pepparkakshustävlingen!
2013-07-08, 11:12
  #1
Medlem
Har en fontello-icon som föreställer ett hjärta, som jag ska ha en "pounding" animation. Men det vill inte fungera. Är nybörjare på keyframes (har aldrig använt dem förut).

Såhär ser min kod ut:

html markup:

HTML-kod:
<i class="icon-heart"></i>

fontello setupen:

Kod:
@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'; } /* '' */

keyframe och lite mer css:

Kod:
@-webkit-keyframes pound {
    to { transform: scale(1.4); }
}
 
.icon-heart {
    color: #e00;
    animation: pound .25s infinite alternate;
    transform-origin: center;
}
Citera
2013-07-08, 14:40
  #2
Moderator
vhes avatar
Inte testat din kod (kände helt ärligt inte till konceptet innan jag läste din fråga) men det kan inte vara så att din browser inte stöder animationer av content genererad med :before ?

http://css-tricks.com/transitions-an...rated-content/
Citera
2013-07-08, 15:19
  #3
Medlem
Citat:
Ursprungligen postat av vhe
Inte testat din kod (kände helt ärligt inte till konceptet innan jag läste din fråga) men det kan inte vara så att din browser inte stöder animationer av content genererad med :before ?

http://css-tricks.com/transitions-an...rated-content/

Det löste sig, det handlade om att jag inte hade inkluderat rätt webkit-prefix.

Såhär skulle det se ut:

Kod:
@-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;
}
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback