过渡

transition
过渡是由一种状态渐渐过渡到另一种状态,从而实现动画效果

div {
  width: 200px;
  height: 100px;
  margin: 100px auto;
  border: 1px solid black;
  background-color: lime;
  transition: width 1s;/*鼠标移入div后宽度变为400,持续时间1s*/
}
div:hover{
  width: 400px;
}

语法详解(分解):
过度的属性 transition-property:
持续时间    transition-duration:
过渡延迟    transition-delay:
过渡运动方式    transition-timing-function:linear:linear匀速/ease-in-out先加速后减速

posted @ 2020-09-06 13:08  MIKE-CHOW  阅读(310)  评论(0)    收藏  举报