Question

我使用jquery输入插件TypeIt.js（http://macarthur.me/typeit/）制作了一些文本动画。现在我有以下问题：我想使用css关键帧为键入的＆lt; 3设置一个心形图标，并需要你的帮助。它不应该悬停，它应该在特定延迟后改变（也许在TypeIt.js键入我的＆lt; 3文本后1秒。

这是我的代码无效：

.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;来表示这种情况。我还建议使用速记字符串来制作动画。在页面加载时写入更少的AND更有效率，它不必经过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

使用css关键帧将范围文本更改为图标

1 个答案: