过渡效果和动画效果

过渡效果

transition

transition-property:过渡属性

transition-duration:过渡持续时间

transition-timing-function:过渡函数

transition－delay：过渡延迟时间

简写

transition:属性 秒数 函数 延迟

过渡函数

ease：开始和结束慢，中间快，默认值

linear：匀速

ease-in：开始慢

ease-out：结束慢

ease-in-out：和ease类似，但比ease幅度更大

设置多个值

transition:属性1 时间1.....，属性2 时间2.....;

动画效果

动画属性(animation)

animation-name：规定需要绑定到选择器的keyframe名称

animation-duration：规定完成动画所花费的时间，以秒或毫秒计时

animation-timing-function：规定动画的速度曲线

animation-delay：规定动画开始之前的延迟

animation-iteration-count：规定动画应该播放的次数

keyframes

1.按百分比指定动画

2.from...to...指定动画

注意：开始与结束相同，可以让动画更平滑