css3过渡动画——transition属性

• 语法

transition: transition-proterty transition-duration transition-timing-function transition-delay;
transition: css样式  动画的执行时间  速度类型  动画的延迟时间;
 多个css属性用逗号隔开
 transition: transform 2s, background-color 2s;
​
注意：谁发生了属性的改变 就加在谁身上

• 属性

  1、transition-proterty

  • css样式：参与过渡的css属性名称|all表示所有属性

  2、transition-duration

  3、transition-timing-function

  • 1.linear 相同的速度从开始到结束，也就是匀速 2.ease 默认值 慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果，也就是以低速度开始 4.ease-out 慢速度结束的过渡效果，也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果

  4、transition-delay

  动画执行时间：默认0s，s|ms(毫秒) 1s=1000m速度类型

  • 延迟时间：默认0s,单位s|ms

注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果