css怎么实现动画

这篇文章主要讲解了“css怎么实现动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么实现动画”吧！随着业务对前端的需求越来越多，作为前端三大法宝之一的css也越变越复杂。给初学的同学们带来了一定的压力。css具体到每一个属性也都没有多复杂，主要问题在于知识点比较多。好不容易把主要知识点学完了，一看网上的题，或者是一看大师们写的css的书，又被淹没到新的海洋中。其实人类的大脑不善于记忆零散的知识点，但是如果有一条逻辑线能够将这些知识串联起来，就能大大方便大脑的记忆和搜索。这个线索要有逻辑，最好还有趣。刚好，css的动画就是这样一条有趣的线索，可以在动画的变化中理解css属性。在串起其它属性之前，我们先理解下动画。动画的核心关键词在于“动”。
我们要回答几个问题:What: 什么东西动？Where: 往哪里动？When: 什么时候动？动多久？How: 怎么动？How much: 动多少次？这些问题的结果，就构成了一个动画的构成要素。首先是动的主体是什么？就是我们的HTML标签，或者是标签构成的复杂组件之类的。对我们来说，主要就是和.
第二，往哪里动？这就是要变化的css属性。这也是我们想用来串起来的css的知识点。
第三，什么时候动？我们需要指定动画的时长，起始的时机等等。这是纯动画的技术属性。
第四，怎么动？是匀速动，还是加速动，还是先加速再减速，还是要搞个贝塞尔曲线之类的，这也是动画的技术属性。
第五，动多少次？是一次，还是多次，还是一直动下去？这也是纯动画的技术属性。transition动画我们先学习一个简单的css属性动画，叫做transition。
它就是由上面的4个属性组成的：transition-免费云主机、域名property: 指定要变的css属性值transition-duration: 动画时长transition-timing-function: 动画的快慢变化transition-delay: 动画起始的延迟时间我们来看个例子：这个动画指定的意思是说，如果宽度width变化了，则延迟一秒运行5秒宽度变化的动画。变化速度是匀速的。为了看得清楚，我们设一个初始的width，再加上一个背景色和前景色：既然是动画，那么要有变化。
于是我们写两句javascript：然后找个事件来触发这个变化，比如我们在页面加载时来做：完整的代码如下：熟练了之后，我们也可以将４个属性简写成一个：如果没有延时，第4项可以不写。
如果采用先慢后快的ease方式，第3项也可以省略。
如果第一项是什么变都动，可以写成all。
但是第二项动画时长不能不写，不写默认是0秒，就啥也没有了。所有的可以线性计算的属性都可以用来进行动画。除了宽、高、位置等容易理解的坐标属性，颜色属性也是经常被用来做动画的好场景。keyframes动画上面的transition比较简单，针对于比如要循环多少次，或者变过去还要再变回来，或者中间要变几次等，我们就需要指定更多的属性。这些需求就由keyframes动画来满足。keyframes动画的好处就是起点和终点都在keyframes中指定，不用再写事件去改变了, 全部在css中完成：然后我们在一个css选择器里面去引用定义好的keyframes动画，同时指定动画时长、变化曲线和延时：到了keyframes动画，我们终于可以指定播放多少次了，比如连播三次：甚至可以无限性地播放下去:光循环播还不过瘾，我们还想先正着变，然后再变回来，我们可以将方向设为交替播放：把上面的综合在一起，大家跑起来看看：而其实呢，from和to，分别是0%和100%的别名，也可以这么写：这样我们可以增加百分比，让变化变得更有趣一些:最后，如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现，比如我们让点击第一个div来实现暂停功能：我们现在终于可以看看开篇时的第一个动画是如何写成的了：平面移动：transform:translate属性最简单的平移方式就是使用transform:translate属性。我们先让变色的圆角矩形向下移100px，然后再右移100px:旋转：transform:rotate属性最后我们看旋转属性。让我们回归基础，通过动画来了解盒子模型。所谓盒子，最基础的就是宽和高。
这没啥可说的，来个宽高动画先体验一下：除了宽高之外，盒子有边框，边框内部有padding，边框外面还有margin。包括边框在内，都分为top, bottom, left, right四个方向：我们现在给边框加上颜色和形状，带着margin和padding动起来代码如下：打开chrome的开发者工具，我们可以更清楚地看清content, padding, border, margin, 之间的关系：感谢各位的阅读，以上就是“css怎么实现动画”的内容了，经过本文的学习后，相信大家对css怎么实现动画这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: ethereal抓包分析TCP/IP数据帧的方法

本文小编为大家详细介绍“ethereal抓包分析TCP/IP数据帧的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“ethereal抓包分析TCP/IP数据帧的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 免费云主机、域名…