jquery - 使用 css 关键帧将跨度文本更改为图标

Question

我使用 jquery 打字插件 TypeIt.js (http://macarthur.me/typeit/) 制作了一些文本动画。现在我有以下问题:我想使用 css 关键帧将键入的 <3 动画化为心形图标，需要您的帮助。它不应该悬停，它应该在特定延迟后发生变化(可能在 TypeIt.js 输入我的 <3 文本后 1sek。

这是我的代码，但无法正常工作:

.hearticon {
    animation-name: switch;
    animation-delay: 1s;
    animation-duration: 0.7s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@-webkit-keyframes switch {
  from {
    opacity: 0;
  }

  100% {
    opacity: 1;
    background: url(img/heart.png);
    width: 15px;
    height: 15px;
  }

}

@keyframes switch {
    from {
      opacity: 0;
    }

    100% {
      opacity: 1;
      background: url(img/heart.png);
      width: 15px;
      height: 15px;
    }

  }

<span class="hearticon"><3</span>

我不得不说我以前从未使用过 css 关键帧。感谢您的帮助

Answer 1

对于这种情况，我会在关键帧动画中使用 position: absolute;。我还建议为您的动画使用速记字符串。它在少写和加载页面时效率更高一点，它不必经过 5 行代码 - 相反它读取 1 行但做同样的事情。无论如何，简单的提示都有助于提高性能。

关于你的问题，下面是你所要求的作品。

HTML:

<span class="hearticon"><3</span>

CSS:

.hearticon {
  animation: switch .7s ease-in forwards 1s; //Shorthand string versus having 5 lines of code here...('switch' = animation-name), ('.7s' = animation-duration), ('ease-in' = animation-timing-function), ('forwards' = animation-fill-mode), and ('1s' = animation-delay)
}

@-webkit-keyframes switch {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-image: url("http://image.flaticon.com/icons/png/128/148/148836.png"); //Put your own image here
    position: absolute;
    width: 128px; //Adjust to your size
    height: 128px; //Adjust to your size
  }
}

@keyframes switch {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-image: url("http://image.flaticon.com/icons/png/128/148/148836.png"); //Put your own image here
    position: absolute;
    width: 128px; //Adjust to your size
    height: 128px; //Adjust to your size
  }
}

其他提示:使用关键帧时，您可能还需要考虑使用 firefox、IE 和 opera 的供应商前缀。我看到您有使用 -webkit- 前缀的 chrome 和 safari，但是如果您希望您的网站在多个浏览器之间兼容，我建议添加 -moz-、-o- 和 -ms-。

例如:

.hearticon {
    -ms-animation: switch .7s ease-in forwards 1s; //Used for IE
    -webkit-animation: switch .7s ease-in forwards 1s; //Used for chrome & safari
    -moz-animation: switch .7s ease-in forwards 1s; //Used for Mozilla Firefox
    -o-animation: switch .7s ease-in forwards 1s; //Used for Opera
  animation: switch .7s ease-in forwards 1s; //Will become standard
}

还有:

@-ms-keyframes switch {
  0% {
        // Your code here
    }
  100% {
        // Your code here
    }
}
@-webkit-keyframes switch {
  0% {
        // Your code here
    }
  100% {
        // Your code here
    }
}
@-moz-keyframes switch {
  0% {
        // Your code here
    }
  100% {
        // Your code here
    }
}
@-o-keyframes switch {
  0% {
        // Your code here
    }
  100% {
        // Your code here
    }
}
@keyframes switch {
  0% {
        // Your code here
    }
  100% {
        // Your code here
    }
}

最后，一个工作 DEMO