下面大家来看一个简单的例子,如何把AE动效转换成CSS3代码。
//AE动效代码 @keyframes intro { 0%{opacity:0; transform:scale(0.9);} 100%{opacity:1; transform:scale(1);} } //CSS3代码 @keyframes intro { 0% {opacity:0; transform:scale(0.9);} 100% {opacity:1; transform:scale(1);} }
在上面的代码中,大家可以看到AE中的关键帧属性opacity和transform被转换成了CSS3的关键帧动画属性。
需要强调的是,AE动效转CSS3并不是万能的。有些高级的动效仍然需要用AE来制作和导出成为可用的动画素材。但是对于那些简单的动效,使用AE动效转CSS3可以让大家更加高效地制作出优质的动画效果,加强网页视觉体验。