如何向前端表达想要的动画效果_CSS学习

资料来源：网络整理时间：2023/3/4 2:43:40 共计：3576 浏览

如何向前端表达想要的动画效果？

制作AE动效视频

设计师是最清楚关键帧的分配情况的，给他一个AE动效演示视频，是最能表现设计师想法的。熟悉了软件，制作起来也是非常快的。能够大致还原就可以了，交代清楚：动画过渡是线性放大，还是先快后慢，或者先慢后快。比如你可以用AE预先用AE做出这样的GIF图片或视频。

案例1

案例2（平面设计学习日记网-书籍页面）

设计师要懂点前端代码——动效代码

我也是学过前端开发的设计师，其实一般的web前端动效，都可以用CSS3中的transition属性来控制，transition英译过来就是：过渡、转变的意思。transition属性对应的值有四个：

transition-property，规定设置过渡效果的 CSS 属性的名称。transition-duration，规定完成过渡效果需要多少秒或毫秒。transition-timing-function，规定速度效果的速度曲线。transition-delay，定义过渡效果何时开始。动效代码解析

在上述案例2中，我们把鼠标移动到书籍方面上，底部会弹出一个红色的购买按钮，这就是红色按钮的属性发生了变化。其中最为关键的代码，就是红色按钮，距离整个书籍方盒子的顶部距离发生了变化。

top: 300px;（前，状态1)top: 235px;（后，状态2）控制这两者状态由1变为2代码：transition: all 0.2s ease;

所以，知晓了上诉情况，和前端工程师几乎一点就通，绝对不会有任何障碍，即使有问题我们还可以通过第一步中的AE动效演示，给其完美示范。

当然，最好的网页设计师，是需要懂一点前端代码（掌握html、css即可）的，这能为你们的工作衔接、沟通提供更大的便利，这就像每个前端工程师需要学习PS软件掌握切图技能一样。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：安卓手机需要系统升级吗_CSS学习 | ·下一条：tr中td之间的距离怎么设置_CSS学习