html - 加载页面上的CSS3字母间距动画

这是我第一次尝试使用CSS3动画。我正在尝试创建一个字母间距动画，在该动画中，首先将字母紧密地隔开，然后增加字母间距。到目前为止，我已经找到了允许间隔发生在悬停时的代码。当页面打开时，如何删除悬停并制作动画。

这是小提琴http://jsfiddle.net/Lventbau/

和代码

p {
    letter-spacing:-2px;
    -webkit-transition: letter-spacing, 1s;
    -moz-transition: letter-spacing, 1s;
    -o-transition: letter-spacing, 1s;
    transition: letter-spacing, 1s;
}
p:hover {letter-spacing:2px;}

最佳答案

您可以使用css3动画jsfiddle完成此操作：

p {
    letter-spacing:2px;
    -webkit-animation: myanim 1s;
    animation: myanim 1s;
}

@-webkit-keyframes myanim {
  0%   { letter-spacing: -2px; }
  100% { letter-spacing:2px; }
}
@keyframes myanim {
  0%   { letter-spacing: -2px; }
  100% { letter-spacing:2px; }
}

您可以找到动画文档here

关于html - 加载页面上的CSS3字母间距动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25621026/