CSS动画效果,css3动画效果代码
看网易游戏官网(http://kanyouxi.163.com/)(下架)是我之前(2014年)做的一个项目，也是我们第一个抛弃Flash，采用HTML5做动画的网站。当时业内为数不多的网站使用CSS3进行主动画的实际制作，当然现在已经广泛使用，尤其是在移动端，CSS3是性能的保证。现在总结分享一下，让你能学到新的东西，希望对新手进阶有帮助。
什么样的动画？
这个动画并不复杂，但是包含了变换、旋转、平移、关键帧、慢动作、循环次数等几个重要内容。好了，我们先来看看动画效果。下面是录制的动画。也可以去网易看游戏官网(http://kanyouxi.163.com/)(已经下架)看看。
有几个要点，依次是：
把iPhone调成白色，然后小晃几下；右边出现字幕，向左推白色iPhone想到白色iPhone之后，黑色iPhone也出现了；头条“网易看游戏”背景一波一波闪烁翻滚。我们一个一个来。
注意：这是一篇CSS3高级实践文章。如果不太了解CSS3动画，请先看这里：CSS3动画，1分钟后再回来。
1. 向上翻动并抖动
以下是一些关键属性。详细用法可以进去看看：@keyframes，transform:rotate(deg)；transform-origin:x，y；
准备动画关键帧@关键帧
@关键帧iphone-front { 0% { transform:rotate(-30 deg)；变换-原点：125px 650px} 100% {变换：旋转(0度)；transform-origin:125 px 600 px；}}我们直接用百分比比例作为帧点，因为后面会细分成多个帧。
设置旋转和锚点(锚点变换-原点：x，y；)
变换：旋转(-30度)；变换-原点：125px 650px旋转是必要的，但是为什么要修改锚点呢？
锚点，借用cocos2D，指的是变换的原点。
因为transform的默认锚点是中心，即(50%，50%)，transform中的锚点属性是transform-origin，下面是默认值：
Transform-origin:50%，50%在支持3D的变换中，还有第三个值：Z，默认为0。
如果不修改，它会绕着iPhone的中心旋转。这不是我们想要的效果，所以把它移到下面的水平中心。
这张图的宽度是250px，高度是525px，底部中心是(125px，525px)。但是，为了模拟真实的东西在桌子上摆动，它必须向下移动一点。经过尝试，我们最终选择了(125px，650px)，如下图：
添加抖动与拟物
抖动其实是几个关键帧组合的产物。第一次旋转不是0度，而是一点点10度，然后来回两个关键帧，幅度逐渐减小。添加关键帧后的@关键帧更改如下：
@关键帧iphone-front { 0% { transform:rotate(-30 deg)；变换-原点：125px 650px} 50% {变换：旋转(10度)；transform-origin:125 px 600 px；} 75% {变换：旋转(-5度)；} 100% {变换：旋转(0度)；}}}注意在上面33%位置的帧处，增加了一个transform-origin:125 px 600 px；因为如果锚点保持不变，会感觉像钟摆一样，太死板，无法物化。想象一下：有个东西以抛物线落到地面，与地面碰撞，改变运动方向，最后慢慢停下来，于是我们也把中心点的高度降低一点，让人看起来“不那么规律”。
在关键帧的时间点，还模拟了慢出的慢动作效果。所谓动画感觉做得好不好，就是慢动作效果做得怎么样，是否足够接近物理世界给人的认知。
这个帧点也不是最后一个时间点，请继续往下看。
2.字幕出现，推开iPhone
字幕出现。
字幕在另一个元素中，所以我们创建一个新的关键帧组：
@关键帧内容{ 0% { transform:translate 3d(550 px，0，0)；} 100% { transform: translate3d(0，0，0)；}}因为是iPhone动画先走，然后是字幕，动画延时动画-延时：
动画-延迟： 2s；但是为了更好地同步这两个关键帧组，我们不用计算，所以我们也这样做：
@关键帧内容{ 0% {不透明度：0；} 40% { transform:translate 3d(550 px，0，0)；不透明度：0；} 100% { transform: translate3d(0，0，0)；不透明度：1；}}先用透明度隐藏，从40%开始，然后在移动的过程中逐渐显示，这样过程更流畅。
前面说了，中间要推带字幕的iPhone。我该怎么做？
模拟碰撞
纯CSS3做不到，除非全程用JS，或者用Box2D判断碰撞。但这里我们只是简单的走过场，不需要人机交互，也不改变移动距离。所以我们用一个魔术，两个动画平行在一起，关键节点埋关键帧，也就是当字幕移动到iPhone位置时，iPhone开始移动。
两个关键帧组的组合是：
@关键帧iphone-front { 0% { transform:rotate(-30 deg)；变换-原点：125px 650px不透明度：0；} 20% {变换：旋转(10度)；transform-origin:125 px 600 px；不透明度：1；} 30% {变换：旋转(-5度)；} 38% {变换：旋转(0度)；} 60% {transform: translate3d(0，0，0)；不透明度：1；} 90% { transform:translate 3d(-340 px，0，0)；} 100% { transform:translate 3d(-340 px，0，0)；} } @关键帧内容{ 0% {不透明度：0；} 40% { transform:translate 3d(550 px，0，0)；不透明度：0；} 60% { transform:translate 3d(225 px，0，0)；不透明度：1；} 80% { transform: translate3d(0，0，0)；不透明度：1；} 100% { transform: translate3d(0，0，0)；不透明度：1；}}/*下面的选择器省略了非动画属性设置，比如宽度和高度，我们就默认取为正确值*/。iPhone-front {动画：iPhone-front 1.8s易出论坛；}.内容{动画：内容1.8s缓出；}可以看到，这里没有使用delay属性，是为了更直观的设置并行动画。大家在60%的位置相遇，都用ease-out来缓出。
为什么要在iphone-front的100%帧处重复90%的内容？因为我们使用的是animation-fill-mode属性，所以值是forums，也就是停在最后一帧。100%不写的话，又会回落到原来的状态。
3.黑色iPhone紧随其后。
黑色iPhone的动画更简单，只是淡入和移入，这也是另一种并行动画。然而，这一次，你可以使用延迟。先估算一下大概的出现时间，从0.5s就可以得出：
@ key frames iphone-back { 0% { transform:translate 3d(97px，0，0)；不透明度：0；} 40%{不透明度：0；} 50%{ transform: translate3d(0，0，0)；不透明度：1；} 100% {不透明度：1；}}.iphone-back-ani{动画：iphone-back 1.8s缓出. 5s转发；}这里不需要重复写最后一帧的代码，因为是(0，0，0)，不会产生任何变化。
为什么要平移3d(x，y，z)；不带translateX(x)？因为早前有人认为这个效率会更高，尤其是在移动端。
查看手册：转换
4.标题背景波浪
这个不涉及transfrom，这样前景重叠背景，背景图像在Y轴上连续移动，无限循环，没有慢度；关键是这个背景图像必须从上到下无缝连接：
@关键帧标题{ 0% { background-position:0 0；} 100% {背景-位置：0-76px；}}.title-BG { width:301 px；身高：61px位置：绝对；top:0；左：0；z指数：1；背景：URL(title _ text _ BG . png)repeat-y；动画：片头1.2s线性；动画-迭代-计数：无限；}.标题-正面{宽度：301px身高：61px位置：绝对；top:0；左：0；z指数：2；背景：url(title_text_front.png)无重复；}这是最简单的方法，适用于大多数情况。还有其他更高级的，比如用面膜。口罩请见《CSS Masking》。
其他影响
标签
手写动画虽然耗时，但是可以帮助你理解现实的原理。如果需要可视化制作，给大家推荐一个在线工具：cssanimate。与其他生成器相比，它的优点是可以设置多个关键帧，拖动鼠标就可以直接操作。推荐！
这就是这篇关于制作css3页眉动画效果的文章。更多相关CSS3头动画内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。