我最近有机会深入研究了一些CSS3动画。我使用过像animate.css这样的库，在javascript中完成动画，但从未完成任何自定义CSS3工作原始任务我们最近更新了SeatGeek上的“轨道”图标，以匹配我们新的iPhone应用程序。首席设计师在PSD中创建了不同状态的心形图标，并创建了以下动画：什么是CSS3动画？在CSS中，动画是一种使元素逐渐改变其样式的效果。您可以使用@keyframes关键字后跟动画名称来创建动画。@keyframesheartAnimation{/*Animationcodegoeshere*/}要使动画跨浏览器兼容，您需要使用供应商前缀：@keyframesheartAnimation{/*IE10+*/}@-webkit-keyframesheartAnimation{/*Safari4+*/}@-moz-keyframesheartAnimation{/*Fx5+*/}@-o-keyframesheartAnimation{/*Opera12+*/}但是，对于本文的其余部分，我将排除提供空间商前缀。下一步是添加动画效果并确定它们何时出现。您可以使用从0%到100%的百分比或使用“from”和“to”关键字来执行此操作，只需使用开始和结束状态的简单动画即可。下面是一个将背景颜色从黄色变为蓝色，然后从黄色变为绿色再变为蓝色的示例。@keyframescolorChange{从{background:yellow;}到{background:blue;}}@keyframescolorChange{0%{background:yellow;}50%{background:green;}100%{background:blue;}}创建键帧之后，您可以调用动画作为CSS属性。例如，下面的代码将运行colorChange动画2次，持续时间为2秒：动画迭代次数：2；animation-duration:2s;}/*Shorthand*/.color-animation{animation:changeColor22s;}你可以在这里看到所有的CSS3动画属性稍微收缩然后膨胀到比原来的尺寸稍大，然后又恢复到原来的尺寸。心脏点击动画使用上面的CSS3关键帧和动画语法，这是我用来为本页顶部的gif制作动画的代码。它使用css转换和属性来缩放图像。@keyframesheartAnimation{0%{transform:scale(1,1)}20%{transform:scale(0.9,0.9)}50%{transform:scale(1.15,1.15)}80%{transform:scale(1,1)))}}.toggle-animation{动画：heartAnimation0.7s;//不需要迭代计数，因为默认是1次}对于图像，我使用的是精灵，所以我还需要更改图像的位置以获得红色背景：('../images/animation-example-sprite.png')no-repeat-320px0;动画：heartAnimation0.7s；//不需要迭代计数，因为默认值为1次}加载动画对于加载状态，我让心脏变白并无限地进出。也会缩小缩小到原来的大小，不会像上面的heartAnimation代码那样比原来的大小稍微大一点再去到原来的状态。这是加载状态的代码：@keyframesloading{0%{transform:scale(1,1)}50%{transform:scale(0.8,0.8)}100%{transform:scale(1,1)}}/*注意添加的“无限”用于制作动画迭代计数*/.toggle-loading{background:url('../images/animation-example-sprite.png')no-repeat-160px0;//使背景变白动画：loading1sinfinite;-webkit-animation:loading1sinfinite;-moz-动画：加载1s无限；-o-动画：加载1s无限；内置网站：http://heart-animation.herokuapp.com/下面是我用来在单击时为每个图标设置动画的JS。JS添加和删除我添加动画属性的类。$(document).ready(function(){$('.animation-1.image').on('click',function(){$(this).toggleClass('toggle-animation');});$('.animation-2.image').on('click',function(){$(this).toggleClass('toggle-animation-slow');});$('.animation-3.image').on('click',function(){$(this).toggleClass('toggle-loading');});});
