[css] 过渡和动画的区别是什么？

相同：都会让你的页面元素动起来
区别：
过渡 transition1.需要事件触发，比如hover，focus，checked , js改, @media query
2.一次性的
3.只能定义开始和结束状态，不能定义中间状态
举例：
transition: width 2s;
动画 animation1.不需要事件触发
2.显示地随着时间的流逝，周期性的改变元素的css属性值。区别于一次性。
3.通过百分比来定义过程中的不同形态，可以很细腻
举例：
原生css实现闪烁的bling bling的效果@keyframes bling-kf {0% { opacity: 1; }50% { opacity: 0.5; }100% { opacity: 1; }
}
.bling {animation: bling-kf 2s ease-in infinite;
}不停的bling bling，很有趣的，:)

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题