进阶设计师绝对要懂的CSS3动画(2D篇)

原创文章 分类: 教程 版权:
1233 34 11 1
2017-12-01
9.2
编辑推荐

前沿导读


       近几年来,动效设计已经成为设计师越来越重要的课题。可是,在你的实际工作中,是否发现,你的动效软件用的6到飞起~动效设计创意十足,很酷很炫。当你翻看Drrrible大神的作品时候,你可以一个循环动画效果看一个上午。但是,冷静下来思考的时候,你是否注意到。。。它在前端技术上是否能够实现呢,如何让它接近百分百的实现呢?当你把设计动效稿给到前端小哥的时候,他能否明白你的想法,关注到你的设计细节,甚至是理解你的追求呢?


        靠别人永远不如靠自己,假如你明白了前端动画的基础知识,分分钟钟让你的设计稿变为现实,这样你就能够升职,加薪,当上设计主管,出任CEO,走上人生”巅疯”啦…



动画函数


       学什么都是先从整体构架开始,但因为考虑篇幅和理解能力的因素,所以先从前端的最基础动画说起。其实代码并没有你想的那么难,基础的其实就和学软件操作一样简单,我们一步步开始吧...


Image title






移动变换



Image title





旋转变换


Image title




缩放变换


Image title




拉伸变换


Image title





矩阵变换


Image title





其他细节


Image title





文章寄语


看过这篇介绍后,应该对前端的基本动画大致有了个初步了解。在你设计动画之初,你就能大致了解前端技术能够达到哪些效果(这些基本动画效果是可以互相叠加的),以及对接下来更加复杂的动画打下良好的基础。



       文章如果转载请署名作者名称

       不明白的地方也可以文章留言或私信我,有空我会及时回复你,

       其中可能会有不对的地方,欢迎大家留言纠正,与大家一起成长。

       关注我的微信公众号「 陈踢缺er」


Image title




陈踢缺er

微信公众号:陈踢缺er

96粉丝/4关注

Sketch极速建立自己的图标库2017年末职场黑话大汇总-BOSS篇

陈踢缺er

陈踢缺er

微信公众号:陈踢缺er

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN