CSS中的transform(过渡)和animation（动画）的区别_wpf rendertransform 和animation 的区别

定义：

transform过渡是一种样式转换到另一种样式时的效果
animation是利用@keyframes关键帧完成（元素从开始过程到结束）不需要js技术就可以完成的动画制作

属性的简写

transition: property duration timing-function delay;
1

transition:要过度的属性 花费的时间 运动曲线（linear匀速；ease逐渐慢下来；ease-in加速；ease-out减速,ease-in-out先加速后减速）何时开始；

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
1

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

//1、动画状态不同
	1.transform过渡只有开始和结束两种状态；
	2.animation有开始，过程，结束多种状态
//2、动画触发方式不同:
	1. CSS的transition需要借助别的方式来触发, 比如CSS的状态选择器（如:hover）或 借助JavaScript来触发 。
	2. animation 不但可以使用上面的方式触发, 更重要的是可以自动触发 。
//3、功能点（属性）不同
animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。

//transform和animation的相同点
1. 从整体来看，animation 和 transition 想做的事情都是一样, 通过控制属性变化的过程也, 实现动画; 都是立足于控制本身 dom 的 css 属性变化过程, 来实现动画的视觉效果。

2. 他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16