CSS animation 与 transition 有何区别？

CSS的transition只有两个状态：开始状态和结束状态；但animation可能是多个状态，有帧的概念

CSS的transition需要借助别的方式来触发，比如CSS的状态选择器（如:hover）或借助JavaScript来触发；animation可以自动触发

CSS transition 和 animation 虽然实现动效方式不同，但他们之间有些概念是相同的。比如他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。

另外， CSS 的 animation 是离不开 @keyframes 的，换句话说，我们需要先使用 @keyframes 来注册一个动画效果，即帧来描述动画效果。当然，只注册也不见得有效果，还是需要使用 animation-name 属性引用 @keyframes 注册好的动画效果。

除此之外， animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。

CSS transition 强调的是单一动画属性的过度效果,其过程是简单的，由开始到结束的过程，中间不存在可能的动画转折，只有0到1，比喻：渐隐，渐显;

CSS animation 强调的是多种动画属性的结合，按时间轴线出现周折性动画变换的动画过程，其过程是复杂的，由开始——>结束的过程中，存在可能的动画转折，其过程可能是开始—0—1—2—3>结束的过程。

综合来说：CSS animation可以包括CSS transition 的动画形式。感觉两者之间,transition像是animation的子集。

CSS animation 与 transition 有何区别？相关推荐

css 缩放_CSS 中 transform、animation、transition、translate的区别
在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...
CSS魔法堂：更丰富的前端动效by CSS Animation
前言在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
css html 优化,CSS Animation性能优化
CSS Animation是实现Web Animation方法之一,其主要通过@keyframes和animation-*或者transition来实现一些Web动效.不过今天我们聊的不是怎么制作We ...
CSS animation动画:实现台球运动效果
CSS animation动画:实现台球运动效果在学习animation动画的时候,我就得这个特别有意思,以后还想制作其他的超酷的效果,以前觉得弄特效的特别帅,感觉现在年龄已经老了,要是从小就有那个 ...
利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
[css] 如何消除transition闪屏？
[css] 如何消除transition闪屏? 题目越简单越有含量. 看题意不知道在问什么,说明这个问题自己没注意或不熟悉,而不是去怀疑题目出的有问题.这个问题自己没有遇到过,或者说没有注意过这个问题 ...
[译]A Simple CSS Animation Tutorial
原文: A Simple CSS Animation Tutorial 看到这篇文章描述简单易懂,适合初学者,于是乎就想着记录和分享一下. (正文) 以将黄色方块转变为蓝绿色圆型作为一个开始. Ani ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
使用css animation动画做边框闪动效果
使用css animation动画做边框闪动效果在拖拽div节点时,给div节点添加diagramTop-item-click样式,使用css animation动画0.5秒执行一次. css样式 ...

CSS animation 与 transition 有何区别？

CSS animation 与 transition 有何区别？相关推荐

最新文章

热门文章