CSS转场动画理解Transition动画关键字【transition】transition：css属性时间模式时间详细写法是：1.transition-property指定需要转场的css属性名称2.transition-duration指定transition效果所花费的时间3.transition-timing-function指定transition效果的时间曲线4.transiity-delay指定transition效果开始的时间每个transition/transition-property/transition的属性值-property:none|all|propertylist(多个可以用逗号隔开)/transition-duration/transition-duration:time(秒或毫秒)/transition-timing-function/transition-timing-function:/*1.linear:starttoend是一个速度（匀速运动）2.ease:以慢速开始，逐渐变快，然后以慢速结束（抛物线运动）3.ease-in:以慢速开始的过渡速度4.ease-out:以慢速结束的过渡5.ease-in-out:缓慢开始和结束过渡6.cubic-bezier:在函数中自定义自己的值*//transition-delay/transition-delay:时间（过渡开始的时间）动画创建CSS动画，需要了解关键帧规则和动画属性。@keyframes需要指定变化发生的时间，可以用百分比如0%、50%、100%等，也可以用from和to来表示0%和100%。0%是动画的开始，100%是动画的结束。/创建@keyframes规则从和到/@keyframesanim{from{width:150px;高度：150px；背景色：蓝色；}to{width:400px;
height:400px;
background-color:beige;
}
}/percentagemethod/@keyframesanim1{0%{width:150px;}25%{宽度：300px；}50%{宽度：150px；}100%{宽度：300px；}}
