小伙伴们都知道，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动画效果示例：
- 过渡（Transition）：实现元素在状态改变时平滑过渡的效果，例如颜色、大小、位置等的过渡动画。
/* 鼠标悬停时文字颜色过渡 */
a {
color: black;
transition: color 0.3s ease;
}
a:hover {
color: red;
}- 旋转（Rotation）：实现元素的旋转效果，可以让元素以指定角度进行旋转。
/* 图片旋转动画 */
img {
transition: transform 0.5s ease;
}
img:hover {
transform: rotate(180deg);
}- 缩放（Scale）：实现元素的缩放效果，可以让元素在鼠标悬停时放大或缩小。
/* 图片缩放动画 */
img {
transition: transform 0.5s ease;
}
img:hover {
transform: scale(1.2);
}- 淡入淡出（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老司机了，持续为大家分享有价值、有见地的观点、作品、干货，欢迎评论、关注、点赞、有事请私信。
