锚链接跳转动画 css

One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging.  I've created this effect with three flavors of JavaScript:  , , and even the .  Luckily CSS3 (almost) allows us to ditch JavaScript entirely to create the link nudge effect!

过去一年中，我在此博客上介绍的一种更流行，更简单的效果是链接微调。 我用三种JavaScript来创建这种效果： ， 甚至 。 幸运的是，CSS3 (几乎)使我们可以完全抛弃JavaScript来创建链接推动效果！

CSS3 (The CSS3)

The first step is defining the animation for element's "natural state":

第一步是为元素的“自然状态”定义动画：

#animateList li a {    cursor: pointer;    transition: padding-left 250ms ease-out;    /* trans pattern:  property duration timingMethod delay */}

The animation above is a fairly routine, smooth animation in padding.  Now that the transition animation property is in place, let's assign it to the same group of elements when they are hovered over:

上面的动画是一个相当常规的，平滑的填充动画。 现在过渡动画属性就位了，让我们将它们悬停在同一组元素上：

#animateList li a:hover {    padding-left: 20px;}

When the matching anchor elements are hovered, the links animate from left to right once over 250 milliseconds with an ease-out transition.  Boom!  Link nudging without any JavaScript!

当匹配的锚点元素悬停时，链接会在250毫秒内从左到右动画一次，并具有缓和过渡。 繁荣！ 没有任何JavaScript的链接轻推！

Of course CSS is and always will be quite limiting with animations because they don't allow for callbacks and events like JavaScript does.  If you're just looking for a simple animation, however, CSS provides everything you need!

当然，CSS对于动画总是有很大的局限性，因为它们不允许像JavaScript那样进行回调和事件。 但是，如果您只是在寻找简单的动画，CSS可以满足您的所有需求！

翻译自:

锚链接跳转动画 css