Motion Design with CSS CSS动画设计教程 Lynda课程中文字幕

Motion Design with CSS 中文字幕

CSS动画设计教程 中文字幕Motion Design with CSS

网页浏览器能够显示令人惊叹的CSS动画和转换 - 这可以在不拖曳其性能的情况下使接口变亮
在本课程中，加入Rachel Nabors，她解释了如何使用CSS动画和转换，以强大的，信息丰富的动作和颜色来增强您的Web应用程序
CSS是当今动画制作最高效的方法之一，本课程将帮助您掌握将您的想法运用到网络上所需的面向未来的技能
Rachel解释了如何在产品设计中融入动画，使用开发人员工具来操纵动画等等

注意：本课程由Frontend Masters创建
它最初于2016年9月15日发布
我们很高兴在我们的图书馆举办这一培训

主题包括：
CSS过渡和动画
在产品设计中使用动画
用CSS创建一个精灵动画
有状态的转换和补充动画
使用开发人员工具来操作动画
跳跃和中间跳跃
静态与动态动画
设计高性能动画





（节奏亚洲的节奏） - 我是Rachel Nabors, 我已经构建了所有从Firefox的真正酷的网络动画工具的互动演示到交互式…
与Adobe Inspire互动的故事。
稍后在本课程中, 我们将仔细观察维多利亚的爱丽丝。
有时, 我甚至可以帮助客户将动画带入他们的运动设计系统和风格指南。
这是一个更实际的动画应用, 而且这些日子越来越受欢迎, 像Google的材料设计和IBM的动画设计语言, 让人们看到动画和动作是健康, 平衡的方法的重要组成部分, 设计。
我还运行网络动画周刊, 这是一个关于这个繁华空间的出发和精彩通讯。
动画已经起飞, 它每个星期都会改变。
所以, 如果你想跟上, 这是一个很好的小精心列表, 每周进入你的收件箱。
我们今天要学什么？
我们将全面了解CSS转换和动画。
如何在产品设计中使用动画。
如何使用JavaScript创建有状态动画。
如何开发工具来操纵所述动画。
如何设计高性能动画。
现在, 我们前进一些事情。
为了方便起见, 所有这些练习都使用jQuery。
我意识到, 很多在本课程中的人已经完全有能力使用没有jQuery的JavaScript。
如果您想在没有jQuery的情况下进行练习, 欢迎使用。
但是我也意识到很多人首先进入前端开发jQuery, 这就是为什么这些都不是用简单的旧版本的JavaScript来写的。
每个人都知道jQuery语法。
每个人都在东方感觉更多, 我们没事。
我宁愿你注意CSS动画和转换语法, 而不是想知道如何用以前可能没有做过的JavaScript做新的事情。
我们也使用-prefix-free。
Prefix-free是一个小图书馆, 它是一个小的JavaScript库。
它的作用是它可以让你编写你的CSS, 而不必担心戴上破折号的webkit, dash moz, blah blah, 所有不同的前缀, 一些浏览器可能或可能不需要正常工作。
它没有前缀, 它给它一个没有前缀的样式表, 它比较它与浏览器支持的任何东西, 如果它看到需要前缀, 它会将一些前缀CSS注入到浏览器中。
我不推荐它用于生产工作。
我们正在使用它, 只因为我希望您专注于使用正确的语法, 而不是记住要使用哪些前缀。
在生产环境中, 您应该使用像Autoprefixer或Sass Mixins这样的东西来处理。
所以记住这一点。
我会提到某些前缀是需要和什么浏览器, 但我期望你有一些解决方案设置为您定期处理。
最后, 最有趣的是, 我们今天将使用CodePen进行实验。
我更喜欢使用CodePen, 只是给你一个大的GitHub回购, 你知道, 然后在早上花一个小时让每个人的开发环境建立起来, 或者告诉你文件应该存储在你的硬盘上。
CodePen很有趣。
这是一个允许你的网站, 好吧, 它像运球的代码。
如果您是前端开发人员, 则可以在屏幕一方面编写CSS, JavaScript和HTML, 然后在屏幕的另一面观看实时更新。
听起来很像DevTools？
那么很好的事情是可以保存这些例子, 然后分享它们。
此外, 您可以分配我给您的示例并将其保存到您自己的帐户。
如果你想这样做, 我强烈建议你现在去CodePen.io并注册一个帐户, 然后我们开始。
本课程视频下载地址:CSS动画设计教程