CSS 动画的艺术：使用视频教程制作生动的互动 (CSS动画的简易演示)

CSS 动画是一种强大的工具，可以为您的网站和应用程序增添生机和趣味。它可以用来创建各种效果，从简单的过渡到复杂的动画。

如果您刚开始接触 CSS 动画，那么有很多资源可以帮助您入门。一个很好的起点就是视频教程。视频教程可以提供逐步指导，帮助您了解如何使用 CSS 创建动画。

使用视频教程制作生动的互动

要使用视频教程制作生动的互动，请遵循以下步骤：

• 找到一个好的视频教程。有很多不同语言的视频教程可供选择。选择一个涵盖您感兴趣的主题且教学清晰的教程。
• 观看视频教程。在观看视频教程时，请记笔记并提出问题。如果您遇到任何问题，可以暂停视频并尝试自己弄清楚，或者在视频下方评论区提问。
• 练习所学内容。一旦您理解了 CSS 动画的基础知识，就可以开始练习所学内容。尝试创建一些简单的动画，例如文本淡入淡出或元素移动。
• 深入研究。一旦您掌握了基础知识，您就可以深入研究 CSS 动画并学习一些更高级的技术。有很多资源可以帮助您了解 CSS 动画的各个方面。

CSS 动画的简易演示

以下是一些使用 CSS 动画创建的简单交互演示：

此交互式演示展示了如何使用 CSS 动画创建文本淡入淡出效果。

这是一个简单的 CSS 代码示例，它将创建一个文本淡入淡出的效果。您可以在自己的项目中使用此代码，或将其用作学习 CSS 动画的起点。

结论

CSS 动画是一种强大的工具，可以用来创建各种生动的互动。观看视频教程是学习 CSS 动画的基础知识和更高级技术的绝佳方式。通过使用本指南中提供的步骤，您可以使用 CSS 动画制作出令人惊叹的交互体验。

---

CSS动画特效源码分享（附在线演示）

本文将分享一系列精美的前端CSS动画特效源码，让你能够直接在线预览和下载。 这些动画包括：CSS飞行的荷包蛋，荷包蛋仿佛加速向右前方飞翔，周围气流飞速掠过；CSS奔跑的卷纸，动态展示卷纸的前后奔跑；奔跑的小人，速度和姿势可调整；可爱的CSS小猫加载动画，吸引年轻人的目光；3D效果的CSS-MacBook动画；傍晚时分的惬意CSS风车动画；以及工作场景的CSS动画，一人一猫一电脑一沙发。 每个特效都有简单模型展示，但实际效果请务必点击在线预览以获取完整体验。 所有这些特效都展示了CSS的强大潜力，为网页设计增添生动与活力。 通过点击主页，你会发现更多源码和互动特效，让你的设计之路更加精彩。 欢迎探索并分享你的灵感！

CSS过渡transition

在网页设计中，CSS过渡（transition）是一种关键的动画技术，它能够让元素从一种样式逐渐平滑地转变为另一种样式，从而提升用户交互和视觉体验。 通过CSS过渡，设计者可以创建出动态、生动的动画效果，例如，当用户将鼠标悬停在某个元素上时，背景颜色逐渐变化，直观地展示元素状态的变化。 实现CSS过渡非常简单，只需要少量代码。 例如，使用:hover伪类和transition属性，可以创建一个背景颜色随鼠标悬停变化的元素。 CSS过渡通过指定要改变的属性及其变化时间来实现动画效果。 下面是一个简单的例子：定义一个名为的类，设置其宽度为100px，背景颜色为红色，并配置transition属性在宽度改变时持续2秒。 当鼠标悬停在元素上时，宽度更改为200px，此时会体验到平滑过渡效果。 CSS过渡的语法简洁，只需要调整transition时间和属性即可实现不同动画效果。 通过调整这些参数，设计者能够创建出各种动态效果，增强页面的交互性和视觉吸引力。 值得注意的是，CSS过渡主要实现单向动画，即只能从一个状态平滑过渡到另一个状态。 若需实现循环动画效果，则需结合使用CSS动画。 学习和深入了解CSS过渡可以通过访问更多相关教程和学习视频，进一步掌握其应用技巧和最佳实践，从而在网页设计中发挥CSS过渡的最大潜力。

CSS交互动画指南之transition

WEB动画世界已经变成了一个庞大的工具和技术丛林，像GSAP和FramerMotion以及ReactSpring这样的库如雨后春笋般涌现，帮助WEB项目开发向DOM添加动作。

不过，最基本和最关键的部分是CSS中的transition。 它是大多数前端开发人员学习的第一个动画工具，WEB的交互动画大部分是由CSS来完成的。

前面介绍keyframes的使用《CSS交互动画指南之keyframes》，在本文中，将深入了解并学习更多关于CSS的动画之transition，文章涉及的代码示例效果可以点击查看动画效果。

基础知识

创建动画所需的主要角色是一些会发生变化的CSS属性，下面是一个鼠标悬停时移动的按钮示例，没有动画：

{width:80px;height:80px;border-radius:50%;border:none;margin:15px;background-color:#6a5acd;place-content:center;color:white;text-align:center;}:hover{transform:translateX(40px);}

当鼠标悬停在按钮上时，这个片段使用:hover伪类来指定一个额外的CSS声明，类似于JavaScript中的onMouseEnter事件。

为了向右移动元素，使用transform:translateY(40px)，虽然可以为此使用margin-left，但transform:translate是一个更佳的方式。

从上面的效果来看，按钮的移动很生硬，下面就为按钮增加transition属性：

{transition:transform250ms;}

transition属性值可以有多个值，但有两个是必需的：

动画属性的名称

动画的持续时间

如果动画是为多个属性设置的，用逗号分隔的列表作为transition属性值：

-2{transition:transform250ms,opacity400ms;}-2:hover{transform:scale(1.2);opacity:0;}

transition有一个特殊的值：all，即为任何CSS属性的变化增加动画效果。

动画效果

当告诉一个元素从一个位置转换到另一个位置时，浏览器需要计算出每个中间帧应该过渡。

例如：假设从左到右移动一个元素，持续时间为1秒，流畅的动画应该以60fps*的速度切换，这意味着需要在开始和结束之间腾出60个单独的位置，就像电影胶片。 如果按照均匀分布，每个浅色的圆圈代表一个帧动画。 当圆圈从左向右移动时，这些是向用户显示的帧，如下：

在这个动画中，使用了一个线性定时函数，意味着元素以恒定的速度移动，图片中的圆圈每一帧的移动量都是相同的。

在CSS中有几种动画效果可供使用，通过transition-timing-function属性来指定：

-3{transition:transform250ms;transition-timing-function:linear;/*或者使用推荐方式*//*transition:transform250mslinear;*/}ease-out

ease-out的效果一头野牛冲了进来，但它耗尽了能量，到最后，就像一只昏昏欲睡的乌龟一样缓慢前行。

从图片效果可以看出前几帧的速度特别的块，以及它在最后变得迅速降低。

ease-in

eease-in的效果正好与ease-out相反，就有点洗衣机脱水，开始慢慢转动，然后快速加速。

ease-in-out

ease-in-out是前面两个动画效果的组合：

ease

ease与ease-in-out不同，它不是对称的，它的特点是有一个短暂的加速和很大的减速。

ease是默认值，如果没有指定动画效果，则默认使用ease。

自定义曲线

如果提供的内置选项不能满足需求，可以使用三次贝塞尔timing函数自定义缓动曲线。

-4{transition:transform250mscubic-bezier(0.1,0.2,0.3,0.4);}

从上面语法可以看到所有值都是这个cubic-bezier函数的预设值，它需要4个数字，代表2个控制点。关于如何定义对应的预设值，推荐一个在线工具cubic-bezier，

调试出满意的动画曲线后，单击顶部的“复制”并将其粘贴到CSS中就可以实现相应的动画效果。

还可以从这个Easingfunctions缓动函数扩展集中进行选择，需要主要的是有些效果CSS的支持不是很好，需要根据实际情况选择。

动画演示

前面提到动画应该以60帧/秒的速度运行。 然而，当计算时，意识到这意味着浏览器只有16.6毫秒来绘制每一帧，时间真的不多。 作为参考，眨眼大约需要100-300毫秒。 对于动画的速率，需要设置一个合理的值，要不然设备跟不上，帧会被丢弃。

在实践中，性能不佳通常会以可变帧率的形式出现，动画性能是一个非常深入和有趣的主题，这里不做详细介绍，但以下几点还是有必要了解一下：

有些CSS属性在制作动画时要比其他属性耗资源得多。 例如，高度改变动画就是一个非常费资源的属性，因为它影响布局，当一个元素的高度缩小时，就会引起连锁反应，它的所有兄弟元素需要向上移动，以填补空间。

其他属性，如background-color，对于动画效果来说也有点影响性能，虽然它不会影响布局，但确实需要在每个动画帧上设置一个颜色。

transform和opacity，是非常推荐的动画效果，对性能影响不大。如果动画当前调整了width或left等属性，则可以通过transform来进行转换（尽管并不总是可以达到完全相同的效果）

请务必在网站/应用所针对的最低端设备上测试动画，为低端设备提供兼容的方案，如去掉动画效果。

硬件加速

根据最终用户浏览器和操作系统的不同，如下图的效果，就存在小缺陷：

仔细观察按钮字母，注意到它们在转换的开始和结束时出现了轻微的偏移，这是因为计算机的CPU和GPU之间的切换导致的。 当使用transform和opacity为元素设置动画时，浏览器有时会尝试优化此动画效果。 它不是在每一帧上光栅化像素，而是将所有内容作为纹理传输到GPU，而GPU非常擅长进行这类基于纹理的转换，因此，得到了非常流畅、非常高性能的动画，这被称为硬件加速。

硬件加速因此也叫GPU加速，是利用GPU进行渲染，减少CPU操作的一种优化方案。 由于GPU中的transform等CSS属性不会触发重绘，所以能大大提高网页的性能。

可以通过添加以下CSS的will-change属性来设置硬件加速：

will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。

-5{will-change:transform;}

will-change允许向浏览器声明将要为所选元素设置动画，并且应该针对这种情况进行优化，这样浏览器会一直让GPU处理这个元素。 不再需要CPU和GPU之间的切换，不再有卡入到位的现象。

CSS中的以下属性能触发硬件加速：

will-change

如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速，如下：

{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);/**或者**/transform:rotateZ(360deg);transform:translate3d(0,0,0);}

即使用translateZ()（或translate3d()）这种hack方式（有时也称为null变换hack）来让浏览器对animation或transform行为使用硬件加速，通过向一个不会在三维空间中转换的元素添加简单的3D变换来实现硬件加速。

总结

前面介绍keyframes的使用《CSS交互动画指南之keyframes》，结合本文的transition，基本可以为前端项目增加相应的改善性的动画。

作者：天行无忌

css3 实现动画效果，怎样使他无限循环动下去？

鼠标悬停，图标会一直不停旋转。 如果实现图标一直不停旋转，则需要使用animation动画。 先制作动画的各个关键帧，然后在图标中运用这一动画。

具体操作如下：

CSS交互动画指南之keyframes

过去WEB需要实现交互动画效果是使用flash、javascript、Gif，近年来随着flash的淘汰，javascript和CSS功能的增强，使得现代WEB应用的交互越来越丰富。 借此总结一下CSS交互动画实现的基础，关键的知识点是keyframes，文章涉及的代码示例效果可以点击查看动画效果。

语法

keyframe动画的实现原理跟flash的实现方式类似，在CSS块之间进行关键帧的属性的更新。下面定义一个keyframe动画，将元素的水平位置从-100%平滑地渐变到0%：

@keyframesslide-in{from{transform:translateX(-100%);}to{transform:translateX(0%);}}

每个@keyframes语句都需要一个名称，一般为交互动画效果名称，上面的代码定了一个滑入slide-in的效果名称。

和其它CSS一样，keyframe动画也是可以通用的和可重用的，可以将它们应用到特定选择器的animation属性中：

-in{animation:slide-in1000ms;}

上面的代码定了在1000ms内，将translateX属性进行改变，并且立即执行。

可以在同一个动画声明中定义多个属性的变化，如下：

-in{animation:drop-in1000ms;}@keyframesdrop-in{from{transform:rotate(-30deg)translateY(-100%);opacity:0;}to{transform:rotate(0deg)translateY(0%);opacity:1;}}动画效果

动画效果使用animation-timing-function属性，定义CSS动画在每一动画周期中执行的节奏，既是常说的动画效果，类似jquery中的easing。

-in-out{animation-timing-function:ease-in-out;}循环动画

默认情况下，keyframe动画只会运行一次，但可以使用animation-iteration-count属性来控制动画执行次数。

-three{animation-iteration-count:3;}

如果是无限次将其值设置为infinite，有限次就按照具体要求输入次数。

{animation:spin1000ms;animation-timing-function:linear;animation-iteration-count:infinite;}@keyframesspin{from{transform:rotate(0turn);}to{transform:rotate(1turn);}}多步动画

除了from和to关键字，还可以使用百分比，可以定义两个及以上的动画步骤：

-spinner{animation:fancy-spin2000ms;animation-iteration-count:infinite;}@keyframesfancy-spin{0%{transform:rotate(0turn)scale(1);}25%{transform:rotate(1turn)scale(1);}50%{transform:rotate(1turn)scale(0.5);}75%{transform:rotate(0turn)scale(0.5);}100%{transform:rotate(0turn)scale(1);}}交替动画

假设要让一个元素“呼吸”，充气和放气。可以将其设置为3步动画：

-shrink{animation:grow-and-shrink4000ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;}@keyframesgrow-and-shrink{0%{transform:scale(1);}50%{transform:scale(0.5);}100%{transform:scale(1);}}

上面的动画效果还有一种更优雅的方式，使用animation-direction属性，用来指示动画是否反向播放。

@keyframesgrow-and-shrink{0%{transform:scale(1);}100%{transform:scale(0.5);}}-shrink{animation:grow-and-shrink2000ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;}

上面定义的动画都是根据不同属性定义不同的值，和其他CSS属性一样，可以只定义一个属性值，即animation。

上面定义动画属性的方式如下：

animation:grow-and-shrink2000ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;

更简洁的方式，也是推荐使用的方式，跟padding不一样的是顺序无关紧要：

-in{animation:slide-in1000ms;}0填充模式

keyframe动画令人困惑的方面可能是填充模式，它们是通往keyframe信心之路的最大障碍。例如希望元素淡出，动画本身运行良好，但是当它结束时，元素会重新出现一下导致闪现的效果：

-in{animation:slide-in1000ms;}1

为什么元素会执行完动画后重新再闪现一下并完全可见了，这是因为from和to块中的声明只在动画运行时有效。

1000ms动画完成过后，元素就按照CSS声明显示，而透明度默认情况下是不透明的。 因此动画完成后透明度又恢复到不透明了。

解决这个问题的一种方法是在动画之外声明透明度，如下：

-in{animation:slide-in1000ms;}2

上面的方案虽然解决了问题，但这不是最佳的方式。 最佳的方式是使用属性animation-fill-mode，设置CSS动画在执行之前和之后如何将样式应用于其目标。

-in{animation:slide-in1000ms;}3

animation-fill-mode属性的参数有以下四个：

none：这是默认值，当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的CSS规则来显示该元素；forwards：目标将保留由执行期间遇到的最后一个关键帧计算值，最后一个关键帧取决于animation-direction和animation-iteration-count的值；backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值；both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

动态动画

keyframe动画实现了基本的动画效果，将它们与CSS变量一起使用的时候可以定义更加复杂的效果。

-in{animation:slide-in1000ms;}4

CSS动画是可以通用的和可重用的，但是这个动画总是会让一个元素弹跳62px。 如果不同的元素可以提供不同的“弹跳高度”，就提高了动画的灵活性。

使用CSS变量，就可以做到：

-in{animation:slide-in1000ms;}5总结

CSS在近几年发生了多大的变化，功能变得越来越强大，促进未来WEB应用变得更佳丰富。

作者：天行无忌

---

---

相关标签： 使用视频教程制作生动的互动、 CSS动画的简易演示、 动画的艺术、 CSS、

上一篇：响应式Web设计的CSS使用视频教程优化各种设

下一篇：为初学者设计的CSS深入教程分步掌握CSS为初