CSS动画和JavaScript动画，大扫盲，有代码示例。

大家好，欢迎来到IT知识分享网。

小伙伴们都知道，css和JavaScript都可以做动画，但是大都不知道二者的区分，该如何选择，贝格前端工场借助本文为大家分享一下。

一、css动画和JavaScript动画的区分

CSS动画和JavaScript动画都可以用于在网页上创建动态效果，它们各有优缺点，具体如下：

CSS动画：

– 优点：

• – 简单易用：可以通过CSS属性来控制动画效果，不需要编写复杂的JavaScript代码。
• – 性能较好：使用硬件加速，可以实现流畅的动画效果。
• – 兼容性好：大部分现代浏览器都支持CSS动画。

– 缺点：

• – 功能受限：只能控制一些简单的属性动画，不能进行复杂的逻辑控制。
• – 缺乏交互性：CSS动画通常只能在元素加载时播放一次，不能根据用户行为进行交互。

JavaScript动画：

– 优点：

• – 功能强大：可以通过编写JavaScript代码实现复杂的动画效果，可以控制元素的位置、大小、颜色等属性。
• – 可交互性：可以根据用户行为进行交互，例如点击、拖拽等。

– 缺点：

• – 编写复杂：需要编写一定的JavaScript代码，可能需要使用第三方库来简化操作。
• – 性能较差：如果动画效果过于复杂，可能会影响网页的性能，导致卡顿或闪烁。

CSS动画适合实现一些简单的动画效果，例如过渡、旋转、缩放等；而JavaScript动画适合实现复杂的动画效果，例如路径动画、物理动画等。在选择使用CSS动画还是JavaScript动画时，需要根据具体需求和场景来进行权衡。

二、css动画和JavaScript动画的实现原理

CSS动画和JavaScript动画的原理和不同点如下所示：

CSS动画原理：

• – CSS动画是通过在CSS中定义动画关键帧（keyframes）和动画属性（如transition、animation）来实现的。
• – 当触发动画的条件满足时（例如鼠标悬停、状态变化等），浏览器会根据CSS中定义的动画属性来自动执行动画效果。
• – 浏览器通过硬件加速来优化CSS动画的性能，使得动画效果更加流畅。

JavaScript动画原理：

• – JavaScript动画是通过JavaScript代码来控制元素的属性值，从而实现动画效果。
• – 开发者可以使用JavaScript来操作元素的位置、大小、颜色等属性，从而创建各种复杂的动画效果。
• – JavaScript动画可以实现更灵活和复杂的动画效果，因为开发者可以根据需求编写逻辑控制动画的行为。

不同点：

• 1. 实现原理：CSS动画是通过CSS属性和关键帧来实现的，而JavaScript动画是通过JavaScript代码来操作元素属性值来实现的。
• 2. 功能灵活性：JavaScript动画可以实现更灵活和复杂的动画效果，可以根据用户交互来动态控制动画的行为，而CSS动画相对功能受限。
• 3. 性能优化：CSS动画通常使用硬件加速来优化性能，因此在一些情况下，CSS动画的性能可能会更好。JavaScript动画的性能受到JavaScript引擎的影响，可能会出现性能瓶颈。

CSS动画和JavaScript动画在实现原理、功能灵活性和性能优化等方面有着不同的特点，开发者可以根据具体需求来选择使用哪种动画方式。

三、常见的css动画实例

css动画都是比较简单的，分享一下常见的动画，原来你以为用js实现的，其实是css实现的。

当使用CSS来实现动画效果时，可以通过一些属性和关键帧动画来实现各种各样的动画效果。以下是一些常见的CSS动画效果示例：

1. 过渡（Transition）：实现元素在状态改变时平滑过渡的效果，例如颜色、大小、位置等的过渡动画。

/* 鼠标悬停时文字颜色过渡 */ a { color: black; transition: color 0.3s ease; } a:hover { color: red; }

1. 旋转（Rotation）：实现元素的旋转效果，可以让元素以指定角度进行旋转。

/* 图片旋转动画 */ img { transition: transform 0.5s ease; } img:hover { transform: rotate(180deg); }

1. 缩放（Scale）：实现元素的缩放效果，可以让元素在鼠标悬停时放大或缩小。

/* 图片缩放动画 */ img { transition: transform 0.5s ease; } img:hover { transform: scale(1.2); }

1. 淡入淡出（Fade In/Out）：实现元素的渐显和渐隐效果，让元素以渐变的方式出现或消失。

/* 淡入淡出动画 */ .element { opacity: 0; transition: opacity 0.5s ease; } .element:hover { opacity: 1; }

5.滚动动画（Scrolling Animation）：通过CSS实现页面滚动时元素的动画效果，例如在页面滚动到特定位置时元素的渐显或移动效果。

/* 页面滚动时元素的渐显动画 */ .element { opacity: 0; transition: opacity 0.5s ease; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

6.边框动画（Border Animation）：通过CSS实现元素边框的动画效果，例如边框颜色、宽度的变化等。

/* 边框颜色变化动画 */ .element { border: 2px solid black; transition: border-color 0.5s ease; } .element:hover { border-color: red; }

7.文字动画（Text Animation）：通过CSS实现文字的动画效果，例如文字的颜色、大小、字体等的变化。

/* 文字颜色变化动画 */ h1 { transition: color 0.5s ease; } h1:hover { color: red; }

8.阴影动画（Box Shadow Animation）：通过CSS实现元素阴影的动画效果，例如阴影的颜色、大小的变化。

/* 阴影大小变化动画 */ .element { box-shadow: 0 0 10px black; transition: box-shadow 0.5s ease; } .element:hover { box-shadow: 0 0 20px black; }

这些是CSS可以实现的一些动画效果示例，通过合理地使用CSS属性和关键帧动画，可以实现更多丰富的动画效果。

Hi，我是贝格前端工场，10年前端和UI老司机了，持续为大家分享有价值、有见地的观点、作品、干货，欢迎评论、关注、点赞、有事请私信。