Transform:对元素进行变形;
Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。
Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键贞。
Transition与Animation:
transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值,从而达到一种动画的效果。
1.transition
transition 属性是
transition-property,
transition-duration,
transition-timing-function,
transition-delay
的简称,用于设定一个元素的两个状态,不同的状态可以用伪类,比如:hover, :active 或者是通过 javascript 动态设定。IE10+支持。
所以 transition 的初始值为:
transition-delay: 0s; 定义transition效果开始的时候
transition-duration: 0s; transition效果需要指定多少秒或毫秒才能完成
transition-property: all; 指定CSS属性的name,transition效果
transition-timing-function: ease; 指定transition效果的转速曲线
2.animation
animation 属性是如下这些属性的简写
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none