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

Html CSS3加载页面上的字母间距动画,html,css,Html,Css,这是我第一次尝试css3动画。我正在尝试创建一个字母间距动画,在这个动画中,字母的间距开始很小,然后字母间距增加。到目前为止,我已经找到了一个代码,允许在悬停时使用间距。如何在页面打开时移除悬停并制作动画 小提琴在这儿 代码呢 p { letter-spacing:-2px; -webkit-transition: letter-spacing, 1s; -moz-transition: letter-spacing, 1s; -o-transition: le

这是我第一次尝试css3动画。我正在尝试创建一个字母间距动画,在这个动画中,字母的间距开始很小,然后字母间距增加。到目前为止,我已经找到了一个代码,允许在悬停时使用间距。如何在页面打开时移除悬停并制作动画

小提琴在这儿

代码呢

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动画来完成:


您可以找到动画文档

您可能需要使用jQuery在页面加载时添加类,然后将动画应用于类,使单个
p
元素没有动画。有没有办法使用webkit关键帧来完成此操作?我还有一个查询。是否可以从中心设置文本动画。现在它从左到右设置动画。有没有一种方法可以让它从中心扩散开来。再次感谢:)我去查一下;)享受:,感谢scaleX(文档)的细心,它在ie9上不起作用。对于下一次有一个很好的网站css3:再次感谢!你太棒了!如果你想要更多精彩的东西,你可以查看这个博客;)
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; }
}